1. 实训内容
  前端
    技术 【html,css,js -> vue、react】
  软件工程
    项目管理 【分组  4人】
      组长
      组员
    版本管理  git / gitee(码云)
    文档
      1) 需求文档
        用例说明
      2) 设计文档
        数据设计【Java | python、nodejs】
        前端设计
2. 任务
  1) 分组
  2) 购置阿里云服务器 9.8月 《学生云翼》
  3) ubuntu18.04
      nodejs
      服务接口 启动
      mysql
      apache/nginx  静态服务

                            平均
  实习  2022-10 ~ 2023—06     5k~8k
  初级  2021-07               14k * 14
  中级  第二年                 18k * 
  高级  第三年                  20k+ 
  3~10                        30k

  双程序员  6w   50w 
    3w 300 * 30  90万
3. 简历
  完善简历过程
  1) 基本信息
    博客
    gitee
    个人主页（网站）
  2) 职业技能
    html/css/js
    vue
    linux
  3) 项目经验
    智慧城市大气环境监测系统
    预览地址：
    xxx
  4) 获奖经历
4. 实训软件
  下一步、默认安装到c:prog
  1) 编辑器 vscode
    https://code.visualstudio.com/
  2) nodejs
    https://nodejs.org/en/
  3) 远程登录工具
    1. 自带终端    dos
    2. xsheel     自行下载
  4) git
    版本控制工具
    https://git-scm.com/
5. 网站搭建流程
  1. 网站开发
  2. 将网站上传到服务器
    scp远程上传命令：将本地文件上传到阿里云
    -r 级联，目录下所有文件
    ./cms 当前目录下的cms目录
    root 远程用户名
    8.130.16.184 ip
    :~ 上传目录
    > scp -r ./cms root@8.130.16.184:~
  3. 登录到阿里云
    > ssh root@8.130.16.184
  4. 安装apache2
    # apt update
    # apt install apache2
  5. 测试
    http://8.130.16.184/
    如果没有回应，有可能是防火墙的问题
    云服务器ECS中
      安全组  配置 
        80
        3306
        7001
  5. 将cms移动到/var/www/html下
    因为只有这个目录才能被其他服务器通过80端口访问
    # mv ./cms /var/www/html
6. 软件开发过程
  1) 立项
    背景《智慧城市大气环境监测系统》
    人员配置
      1. 项目经理（管理） 出勤
      2. 产品经理 
        对产品负责【岗位】 (需求分析)
        非技术 - 技术 （功能描述表）
        原型绘制(功能在页面中的体现)
        角色
          管理员
          工人
          客户
      3. 开发
        产品经理组织大家开会讨论需求，告诉下面三波人我们要做一个什么东西
        1. Java工程师    2
        2. 前端工程师     3
        3. ui设计师【美术】
      
      4. 一天一测
        5:30
        5:00 所有人提交代码，各自部署到服务器上，然后进行测试
      




    中间商：租赁环境监测设备【6000/月】 1000台 
      学校
      xxx局
      道路
      某建筑工地 8个月
        采集
        TSP    
        pm10    
        pm2.5
        温度
        湿度
        风向
        风速
  2) 需求分析
      1. 设备管理
        设备信息记录
        设备编号  设备名称  设备状态          在线状态
                          闲置【未绑定】      上线
                          绑定              下线
      2. 工程管理
        名称          地址            起止时间  负责人  负责人联系方式....
        xxx建筑公司   甘肃农业大学食堂
        绑定
          xxx             上线/下线
        解绑
        结束
      3. 采集数据的展示
        某个工程上的某个设备的采集数据
          tsp pm10 pm2.5 温度  湿度  方向
      4. 工单（工人 app）
        安装工单
          接单 -> 查看工单信息（工程、设备）
        拆机工单
          接单 -> 查看工单信息(工程、设备) -> 拆机
        维修工单
          接单 -> 查看工单信息(工程、设备) -> 维修
      5. 报修
  3) 设计

  4) 开发
    1. 2人 大屏开发(vue)
    2. 2人 web开发(vue)
    3. 2人 app开发（vue）
  5) 测试

  6) 部署
7. 实训安排
  前端：【得前端者得天下】
    1) 基础重构   html、css、js
      html  骨架 超文本标记语言
      css   化妆 层叠样式表
      js    内涵 Javascript
      ------------------------------
      宿舍    dom操作
        html/css/js
      120平   戴森吸尘器 借助工具完成dom操作
        jQuery / easyui
      500平   保姆【dom】 - vue、react
    2) web框架阶段
      vue
    3) 跨浏览器、框端
      手机app
      h5 : web思想来开发app 【华为浏览器】
      app: 混合式 vue/react + android/ios
    4) 服务器端开发
      接口
-----------------------------------------------------------------------------
  day01 
    html
    1）特性
      1. html由各种元素组成，元素由开始标签、结束标签、子元素组成
      2. 开始标签中可以为元素添加属性
        核心属性 id、class、style、title
        自有属性 href、target、src
      <div>
        <div >hello</div>
      </div>
    2) 元素分类
      1. 块元素 ： 搭建页面框架、布局（博古架）
        特点：1) 独占一行空间 2）高度默认为0，可以由子元素支撑 3) 可以指定宽高
        div
        h1~h6
        ul>li
        p
        h5新增：header/footer/article/section/aside
      2. 行内元素： 填充

      3. 功能元素
    3) 盒子模型
      1. 盒子组成
        从外到内分别是
          margin        当前元素距离其他元素的距离
            margin-top
            margin-right
            margin-bottom
            margin-left
          border        边框  border:1px solid #ccc;
            border-*
          padding       边框到内容距离
            padding-*

          width         宽
          height        高
        问题？
          1. 这个box占据的宽度是多少？高度是多少？
          2. 如果我就是希望box实际占据宽度为100px，我该怎么办？
          <div class="box"></div>
          .box {
            width:100px;
            height:100px;
            padding:20px;
            border:10px solid #ccc;
          }



    4) 页面布局
      从上往下、从左往右
      解决块元素在一行中排列的问题
      1) 浮动
        浮动解决的问题就是让块元素脱离默认文档流，进入浮动流。浮动元素在浮动流中可以在一行中排列
        如果一个元素上添加float:left/right ，那这个元素就是浮动元素
        浮动元素特征：
          1) 脱离默认文档流，不占据原来的位置
          2) 宽度不再占满整个屏幕，可以手动为其指定宽度，如果不指定，为自身宽度
          3) 如果一样中多个浮动元素排列不下，自动换行
        如何实现？
          前提：html结构一定是嵌套的父子结构
            ul::after {
              content:"";
              display:block;
              clear:both;
            }
            ul > li {
              float:left;
            }

            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>

      2) 伸缩盒

      3）定位
    4) css语法
      <html>
        <head>
          <style>
            选择器 {
              规则 key:v;
            }

          </style>
        </head>
        <body>
        
        </body>
      </html>


  day02
    css/js
  day03
    vue / git
  day04
    项目开发

--------------------------------------------------------------------------------
day02
1. html
  1) 块元素
    用于布局，
    特点：1.独占一行 2. 可以指定宽高 3. 高度由内容支撑【不给父元素指定高度】
    div
    h1~h6
    ul>li ol>li 
    p
    H5新增
  2) 行内元素
    用于填充
    特点: 1. 与其他行内元素共享一行 2. 不可以指定宽高
    span
    img
    a  strong b i em...
  3) 功能元素
    form  表单，用于与服务器进行交互，向后台提交数据
      input
      textarea
      select>option
    table 表格，用于显示
      thead
      tbody
        tr 
          td / th
    iframe
      将其他页面连入到当前网页中
2. css
  1) 语法
    1. 内嵌式（style嵌入到head标签）
    <html>
      <head>
        <title></title>
        <style>
          选择器 {
            规则
          }
        </style>
      </head>
    </html>
  2) 选择器
    1. 核心选择器
      标签选择器  
        div {}  选中所有div元素
      id选择器
        #one {}   选中id为one的元素
      class选择器
        .first {}   选中class为first的元素
      并且选择器
        ul.nav {}   选中标签为ul的并且class为nav的元素
      或者
        ul , .nav {} 选中ul和class为.nav的元素
        <div class="nav"><div>
    2. 层次选择器
      子代选择器
        ul.nav > li {}
      后代选择器
        ul.nav li {}
        <ul class="nav">
          <li>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </li>
          <li></li>
          <li></li>
        <ul>
    3. 伪类选择器【伪类过滤器】
      一定是用在其他选择器之后，是对之前选择器选择结果的一种过滤
      ul.nav{}
      ul.nav>li{} 
    
      ul.nav>li:first-child{} 
      ul.nav>li:last-child{} 
      ul.nav>li:nth-child(1){} 

      <ul class="nav">
        <li>one</li>
        <li>two</li>
        <li>three</li>
      <ul>
    4. 伪元素选择器
      与伪类类似，不同的是使用两个冒号
      ul.nav::after {
        content:"";
        display:block;
        clear:both;
      }
      ul.nav > li {
        float:left;
      }
      ul.nav > li::before {}
      <ul class="nav">
        <li>one</li>
        <li>two</li>
        <li>three</li>
      <ul>
  3) 规则 office  word
    1. 字体规则
      字体规则可以被继承
      font-size:12px;
      font-weight:bold;
      font-style:normal;
      font-family:"宋体" "微软雅黑";
      line-height:2em;
      字体的速写形式
      font: 12px/1.4 "宋体";

      em /rem / px 有什么关系
      em是相对单位，相对于当前元素上的字体大小 12px 1em = 12px
      rem也是相对单位，相对于html上规定的字体大小  
        html {font-size:12px} 
        #one {
          font-size:20px;
          line-height:2rem; // 24px
          line-height:2em; // 40px
        }
    2. 文本规则 
      与字体类似，可以被继承
      color:#333;   文本颜色
      text-decoration:none;
      text-align:center;
      text-indent:2em;
      ...
    3. 盒子规则
      margin
        margin-top
        margin-right
        margin-bottom
        margin-left
        margin: 12px ;  // 上右下左的外边距都为12
        margin: 12px 24px;  // 上下外边距为12px，左右的外边距都为24
        margin: 0 auto; //auto为自适应，用于居中
        margin: 12px 24px 48px; // 上12 右左24 下48
      border
        border-top-width:1px;
        border-top-style:solid;
        border-top-color:#ccc;
        border-top: 1px solid #ccc;
        border-right: 2px solid #ccc;
        ...
        border: 1px solid #ccc;
      padding
        padding
      width
      height

      margin:10px;
      border:10px solid #ccc;
      padding:10px;
      width:100px;
    4. 盒子模型
      1) 内容盒子（传统盒子【默认】）
        {
          box-sizing:content-box;
        }
        width = 内容宽度
      2) 边框盒子(怪异盒子【ie6-】)
        {
          box-sizing:border-box;
        }
        width = 内容宽度 + 2padding + 2border
    5. 背景规则
      background-color:lightblue;
      background-image:url('');
      background-size:
      background-position:
      background-origin:
      ...
      速写
      background:
  4) 布局
    1. 浮动布局
    2. flex布局、伸缩盒布局【常用于手机端的页面开发】
      与浮动布局类似，用于解决块元素在一行中/一列中的排列问题，但是要比浮动布局更加便捷
      <ul.nav>
        <li></li>
        <li></li>
        <li></li>
      <ul>

      1) 容器 【伸缩盒容器】
        ul.nav {
          display:flex;
          flex-direction:row;   // 主轴为x轴
          justify-content: space-between; // 定义子元素在主轴上的排列
          align-items: flex-end;          // 定义子元素在交叉轴上的排列
        }
      2) 元素 【伸缩盒元素】
        ul.nav > li{
          flex-basis:   基准值
          flex-grow:    分配份数
          flex-shrink:  收缩份数  
          
          flex:1;           // 剩余部分一份

        }
      3) 主轴【默认主轴是X轴】
3. Javascript
  1) 特性
    Javascript编程语言，弱类型
    弱类型：
      js
        let a ;   
        a = 3;    // 变量的数据类型取决于值，并且可以随时改变
    强类型
      java 
        int a;  // 变量的数据类型取决于声明，并且一旦声明不能改变。
        a = true;
    解释执行语言
      js
        .js -> js解释器【浏览器/nodejs】 -> 操作系统（win/linux/unix/单片机）
      java
        .java -> .class -> jvm 
  2) 基本数据类型【数据类型】
    number  
      let a = 3;
    string
      let b = '3';
      let c = "true";
    boolean
      let d = true;
      d = 3;
    null
    undefined 
  3) 表达式
    循环语句
      for(){}, while(){} , do{}while();
    分支语句
      if(){}
      if(){} else if(){} else{}
      switch(){}
  4) 操作符
    1. 数学运算符
      + -
    2. 一元运算符
      let a = 3;
      +a;   // 3
      -a;   // -3
      ++a;  // 4
      --a;  // 2
    3. 逻辑运算符
      && || !
    4. 三目运算符
      exp ? exp1 : exp2
    5. 位运算符
      & | ^
  5) 引用数据类型【结构体】
    1. 对象
      1) 创建
        1. 字面量： 使用大括号作为边界，属性名与属性值通过:分割，属性与属性通过,分割，属性名可以不加引号
          let obj = {name:"terry",age:12}
        2. 构造函数
          let obj = new Object();   // { }
      2) 特性
        Js中的对象要比Java中的对象灵活太多了。属性可以动态变化
        let student = {name:"terry",age:12,gender:'male',telephone:'1881234431'};
        delete student.age;
    2. 数组
      1) 创建 
        1. 字面量：使用中括号作为边界，数组中可以存在多个元素，每个元素通过逗号分割,数组中的元素可以通过索引来访问，索引从0开始到数组长度-1，
          let arr = [1,2,3,'terry',true,null,function(){}]
          arr[100] ;  //undefined
        2. 构造函数
          let arr = new Array();    // let arr = [];
        3. api
          应用程序编程接口，是语言的开发者编写的方法，为了让我们更好的使用这门语言

          arr.push()      在数组末尾添加一个元素，返回数组长度
          arr.pop()       将数组末尾的元素删除并且返回
          arr.shift()     从数组的开头删除一个元素，返回删除的元素
          arr.unshift()   从数组的开头插入一个元素，返回数组长度
          arr.sort()      排序
          arr.reverse()   反转
          arr.slice()     切割
          arr.splice()    切割

          arr.forEach()   遍历  定制思想
            arr.forEach( function(item,key){
              console.log(item);  // 每次遍历的结果
              console.log(key);  // 每次遍历的索引
            } )
          arr.map()       映射
            arr.
          arr.some()      是否包含
          arr.every()     是否全部
          




      2)
    3. 函数
      function foo(a,b){
        return a+b;
      }
      let result = foo(1,2)
      console.log(result);
      函数作为参数：回调函数
      函数作为返回值：
  6) es6
    Javascript
      ES5
      DOM
      BOM
    ES6
      模块化
      新的语法
    TS (Typescript) 【非标准，社区】
      ES6 + 强类型

    1. 模块化
      学生选课系统
        学生信息管理{张三}
          登录
          浏览所有可选课程
          选课
          查看选课
        课程信息管理{李四}
          导入
          课程查询
          排课
        选课信息{王五}
          查询所有选课
          学生选课信息
          成绩录入

4. git操作
  git init
  git config --global user.name "plusyu"
  git config --global user.email "licy@briup.com"
  git remote add origin https://gitee.com/plusyu/gsnd_19_note.git
  ~~~~
  git add *
  git commit -m "提交日志"
  git push origin master
  

------------------------------------------------------------------------------
day03 
web端开发
  am
    am-server     服务接口  1人
    am-dashboard  大屏     1人
    am-ui         web     2人
    am-app        app     2人
  协作
    1) 组长
      1. 组长获取老师代码
        > d:
        > git clone https://gitee.com/plusyu/project_am.git
        D:/project_am
      2. 检测代码是否可用
        1. 通过vscode打开d:/project_am
        2. 删除d:/project_am/.git   [隐藏文件]
      3. 在gitee中创建仓库, 组长将老师的代码提交到自己的gitee中
        git config --global user.name "plusyu"
        git config --global user.email "licy@briup.com"
        git init
        git remote add origin https://gitee.com/plusyu/test_am.git
        git add *
        git commit -m "架构"
        git push origin master
      4. 邀请组员
        gitee 管理  -> 仓库成员管理 -> 开发者 -> 邀请用户
        复制邀请链接，发送到小组群里

    2) 组员[组长]
      1. 组员将组长的代码克隆到本地
        > d:
        > git clone xxx.git
        通过vscode打开
      2. 开发
      3. 提交版本
        git add *
        git commit -m "[张三]完成了xxxx"
        git pull origin master
        git push origin master











------------------------------------------------------------------------------
day04
大屏开发

------------------------------------------------------------------------------
day05
手机端开发