复习

  1. *小目标列表
    1. 新增
      1. 按键修饰符绑定enter键按下
      2. 通过v-model获取到输入的待办事项的内容
      3. 转换成一个待办列表项，放入待办列表中
    2. 删除
      1. 在组件内部点击事件，触发一个_自定义事件_del，附带一个待办事项
      2. 通过事件冒泡，将要删除的待办事项传递给了外部，外部监听自定义事件del，分派给处理函数，附带的待办事项就是处理函数的参数
      3. 处理函数内部，删除待办列表中的该待办事项
    3. 分状态列表展示
      1. 计算属性，根据选择的状态，筛选展示的数据 Array.filter(筛选函数)
      2. 页面展示的是计算属性
    4. 分状态统计
      1. 计算属性：根据状态筛选计算
    5. 勾选改变状态
      1. 在组件内部更新状态
    6. 修改内容
      1. html属性 contenteditable
      2. 获得焦点 focus 存原始数据
      3. 失去焦点 blur 保存修改
      4. 按键esc 重置数据为原始数据
    7. Vue编程的一大特点：做数据处理，不涉及DOM操作
  2. 插槽 ```html

Vue.component(‘submit-button’,{ template:`

`

})

填入内容

Vue.component(‘base-layout’,{ template:`

` }) 

  1. 一个组件对外的接口有哪些？
  3. - props 属性
  4. - 自定义事件
  5. - slot 插槽
  7. 3. elementui的使用
  8. - 导入链接：  
  9.    - 样式
  10.    - vue.js
  11.    - elementui.js
  12. - 看文档
  13.    - 示例代码
  14.    - 属性  事件 slot method 文档
  15. - 布局   24栏  
  16.    - el-row  el-col  
  17.    - span属性     offset偏移
  18.    - 响应式    xs sm md lg xl
  19. - container
  20.    - el-container el-header el-main el-footer el-aside
  21. - form  table 走马灯  dialog  message ....
  23. Q&A:
  25. 1. 前后端传值
  26.    1. 使用get方法，{params:{k:v}}     
  27.    1. 使用post方法,跟对象 直接用this.form  @RequestBody接受
  28.    1. 回调函数用箭头函数，解决this绑定问题，this指向vue实例
  29.    1. 回调函数的返回值的结构 response.data<=>返回的result
  30. 2. 格式化  状态  日期
  31. ```html
  32.   <!-- 格式化器 -->
  33.                         <el-table-column
  34.                             prop="state"
  35.                             :formatter="stateFormatter"
  36.                             label="状态">
  37.                         </el-table-column>
  40.  methods:{
  41.                 stateFormatter(row, column, cellValue, index){
  42.                     switch(cellValue){
  43.                         case 'wait': return '待审核';
  44.                         case 'normal': return '审核通过';
  45.                         case 'fail': return '审核失败';
  46.                         default : console.error("错误的状态"+cellValue+"，无法格式化");
  47.                     }
  48.                 },
  49. ..
  50. }
  1. spring:
  2.   mvc:
  3.     format:
  4.       date-time: yyyy-MM-dd HH:mm:ss
  5.   jackson:
  6.     date-format: yyyy-MM-dd HH:mm:ss
  1. 根据条件显示按钮
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.         <!-- 引入样式 -->
  9.         <link
  10.         rel="stylesheet"
  11.         href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
  12.         />
  13.         <title>Document</title>
  14.     </head>
  15.     <body>
  16.     <div id="app">
  17.         <el-container>
  19.         <el-header>
  20.         <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
  21.             <el-menu-item index="1">处理中心</el-menu-item>
  22.             <el-submenu index="2">
  23.                 <template slot="title">我的工作台</template>
  24.                 <el-menu-item index="2-1">选项1</el-menu-item>
  25.                 <el-menu-item index="2-2">选项2</el-menu-item>
  26.                 <el-menu-item index="2-3">选项3</el-menu-item>
  27.                 <el-submenu index="2-4">
  28.                     <template slot="title">选项4</template>
  29.                     <el-menu-item index="2-4-1">选项1</el-menu-item>
  30.                     <el-menu-item index="2-4-2">选项2</el-menu-item>
  31.                     <el-menu-item index="2-4-3">选项3</el-menu-item>
  32.                 </el-submenu>
  33.             </el-submenu>
  34.             <el-menu-item index="3" disabled>消息中心</el-menu-item>
  35.             <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  36.         </el-menu>
  37.     </el-header>
  38.         <el-main>
  39.             <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  40.                 <el-form-item label="教师姓名">
  41.                     <el-input v-model="searchForm.teacherName" placeholder="教师姓名"></el-input>
  42.                 </el-form-item>
  43.                 <el-form-item label="审核状态">
  44.                     <el-select clearable  v-model="searchForm.state" placeholder="审核状态">
  45.                         <el-option label="待审核" value="wait"></el-option>
  46.                         <el-option label="审核通过" value="normal"></el-option>
  47.                         <el-option label="审核失败" value="fail"></el-option>
  48.                     </el-select>
  49.                 </el-form-item>
  50.                 <el-form-item>
  51.                     <el-button type="primary" @click="search">查询</el-button>
  52.                     <el-button type="success" @click="addTeacherDialogVisible=true" icon="el-icon-plus" circle></el-button>
  54.                 </el-form-item>
  55.             </el-form>
  56.             <el-row>
  57.                 <el-col >
  58.                     <el-table
  59.                     :data="tableData"
  60.                     style="width: 100%">
  61.                         <el-table-column
  62.                             prop="teacherId"
  63.                             label="教师ID"
  64.                             width="180">
  65.                         </el-table-column>
  66.                         <el-table-column
  67.                             prop="teacherName"
  68.                             label="教师姓名"
  69.                             width="180">
  70.                         </el-table-column>
  71.                         <!-- 格式化器 -->
  72.                         <el-table-column
  73.                             prop="state"
  74.                             :formatter="stateFormatter"
  75.                             label="状态">
  76.                         </el-table-column>
  77.                         <el-table-column
  78.                             prop="email"
  79.                             label="邮箱">
  80.                         </el-table-column>
  81.                         <el-table-column
  82.                             label="操作">
  83.                             <template slot-scope='scope'>
  84.                                 <el-button v-if='scope.row.state=="wait"' @click="audit(scope.row,true)" type="text" size="small">审核通过</el-button>
  85.                                 <el-button v-if='scope.row.state=="wait"' @click="audit(scope.row,false)" type="text" size="small">审核失败</el-button>
  86.                                 <el-button v-if='scope.row.state=="normal"' @click="fire(scope.row)" type="text" size="small">开除</el-button>
  87.                             </template>
  88.                         </el-table-column>
  89.                     </el-table>
  91.                     <el-pagination
  92.                     background
  93.                     layout="prev, pager, next,sizes"
  94.                     :total="page.total"
  95.                     :current-page='page.current'
  96.                     :page-size='page.size'
  97.                     @current-change='search'
  98.                     >
  99.                     </el-pagination>
  101.                 </el-col>
  102.             </el-row>
  103. </el-main>
  104. </el-container>
  105.     <el-dialog title="新增讲师" :visible.sync="addTeacherDialogVisible">
  106.         <el-form :model="addTeacherForm">
  107.             <el-row>
  108.                 <el-col :span='15'>
  109.                     <el-form-item label="讲师姓名" label-width="180px">
  110.                         <el-input v-model="addTeacherForm.teacherName" autocomplete="off"></el-input>
  111.                     </el-form-item>
  112.             </el-col>
  113.             </el-row>  
  114.             <el-row>
  115.             <el-col :span='15'>
  116.                 <el-form-item label="生日" label-width="180px">
  117.                     <el-date-picker
  118.                     v-model="addTeacherForm.birthday"
  119.                     type="date"
  120.                     format="yyyy-MM-dd"
  121.                     value-format="yyyy-MM-dd HH:mm:ss"
  122.                     placeholder="选择生日">
  123.                     </el-date-picker>
  124.                 </el-form-item>
  125.             </el-col>
  126.         </el-row>  
  127.             <el-form-item label="email" label-width="180px">
  128.                 <el-input v-model="addTeacherForm.email" autocomplete="off"></el-input>
  129.             </el-form-item>
  130.             </el-form>
  131.             <div slot="footer" class="dialog-footer">
  132.             <el-button @click="addTeacherDialogVisible = false">取 消</el-button>
  133.             <el-button type="primary" @click="addTeacher">新增</el-button>
  134.             </div>
  135.     </el-dialog>
  136.     </div>
  138.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  139.     <!-- 引入组件库 -->
  140.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  141.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  143.     <script>
  144.         let app = new Vue({
  145.             el:'#app',
  146.             data:{
  147.                 page:{
  148.                     total:0,
  149.                     current:1,
  150.                     size:10
  151.                 },
  152.                 searchForm:{
  153.                     teacherName:'',
  154.                     state:''
  155.                 },
  156.                 formLabelWidth:"80px",
  157.                 addTeacherForm: {
  158.                     teacherName: '',
  159.                     email:'',
  160.                     birthday:''
  161.                 },
  162.                 addTeacherDialogVisible:false,
  163.                 tableData:[]
  164.             },
  165.             mounted(){
  166.                 this.search(1);
  167.             },
  168.             methods:{
  169.                 addTeacher(){
  170.                     console.log(this.addTeacherForm)
  171.                     axios.post('http://localhost:8000/addNewTeacher',this.addTeacherForm)
  172.                     .then(resp=>{
  173.                         this.$message({message:"新增成功",type:"success"});
  174.                         this.search(1);
  175.                         this.addTeacherDialogVisible=false;
  176.                     }).catch(resp=>{
  177.                         this.$message({message:"操作失败",type:"warning"});
  178.                         this.addTeacherDialogVisible=false;
  179.                     })
  180.                 },
  181.                 stateFormatter(row, column, cellValue, index){
  182.                     switch(cellValue){
  183.                         case 'wait': return '待审核';
  184.                         case 'normal': return '审核通过';
  185.                         case 'fail': return '审核失败';
  186.                         default : console.error("错误的状态"+cellValue+"，无法格式化");
  187.                     }
  188.                 },
  189.                 audit(row,pass){
  190.                     console.log(row,pass);
  191.                     axios.post('http://localhost:8000/audit',{"teacherId":row.teacherId,"pass":pass})
  192.                     .then(resp=>{
  193.                         this.$message({message:"审核操作完成",type:"success"});
  194.                         this.search(1);
  195.                     }).catch(resp=>{
  196.                         this.$message({message:"操作失败",type:"warning"});
  197.                     })
  198.                 },
  199.                 fire(row){
  201.                 },
  202.                 handleClick(row){
  203.                     console.log(row);
  204.                     this.dialogFormVisible=true;
  205.                     // this.$message({message:'你查看成功了',type:'warning'});
  206.                 },
  207.                 search(current){
  208.                     //发请求到后端，搜索数据
  209.                     let param = this.searchForm;
  210.                     param.pageIndex=current;
  211.                     param.pageSize=this.page.size;
  213.                     axios.get('http://localhost:8000/queryTeacher',{
  214.                         params:param
  215.                     })
  216.                     .then(resp=>{
  217.                         if(resp.status=200&&resp.data.success){
  218.                             let data = resp.data.data;
  219.                             this.tableData=data.records;
  220.                             //将后端返回的数据绑定到分页条上
  221.                             this.page.total=data.total;
  222.                             this.page.current=data.current;
  223.                             this.page.size=data.size;
  224.                         }else{
  225.                             this.$message({
  226.                                 message:'查询失败，'+resp.data.message,
  227.                                 type:'warning'
  228.                             })
  229.                         }
  230.                     })
  231.                     .catch(error=>{
  232.                         this.$message({
  233.                                 message:'查询失败，'+error.message,
  234.                                 type:'error'
  235.                             })
  236.                     })
  237.                 }
  238.             }
  239.         });
  240.     </script>
  241.     </body>
  242. </html>

分页

  1.      <el-pagination
  2.                     background
  3.                     layout="prev, pager, next,sizes"
  4.                     :total="page.total"     总条数
  5.                     :current-page='page.current'  当前页
  6.                     :page-size='page.size'    页容量
  7.                     @current-change='search'  当前页码改变时间，回传改变后的页码
  8.                     >
  9. </el-pagination>
  11.  search(current){
  12.                     //发请求到后端，搜索数据
  13.                     let param = this.searchForm;
  14.                     param.pageIndex=current;
  15.                     param.pageSize=this.page.size;
  17.                     axios.get('http://localhost:8000/queryTeacher',{
  18.                         params:param
  19.                     })
  20.                     .then(resp=>{
  21.                         if(resp.status=200&&resp.data.success){
  22.                             let data = resp.data.data;
  23.                             this.tableData=data.records;
  24.                             //将后端返回的数据绑定到分页条上
  25.                             this.page.total=data.total;
  26.                             this.page.current=data.current;
  27.                             this.page.size=data.size;
  28.                         }else{
  29.                             this.$message({
  30.                                 message:'查询失败，'+resp.data.message,
  31.                                 type:'warning'
  32.                             })
  33.                         }
  34.                     })
  35.                     .catch(error=>{
  36.                         this.$message({
  37.                                 message:'查询失败，'+error.message,
  38.                                 type:'error'
  39.                             })
  40.                     })
  41.                 }
  42.             }

demo56.zip

JS发展

nodejs js运行时环境 让js脱离浏览器，在电脑上运行

  • 后端代码，创建httpserver,接受http请求，并且响应；可以访问数据库；可以创建文件读取文件
    • 框架 express / sequelize
  • 桌面端应用程序
    • 框架 electron
  • 移动端应用程序
    • react-native
    • vue -> uniapp / weex

npm nodejs 自带的包管理器，功能类似于maven的依赖管理
webpack 打包工具，类似于Maven的构建流程

html => pug模板，简化html的编写
css => sass / less css拓展语言
js => typescript / coffeescript 升级

安装Node环境

  1. nodejs 自带npm

https://nodejs.org/zh-cn/
安装，下一步，下一步

  1. 测试 node -v npm -v
  2. 编写一个例子
    1. # 编写一个helloworld.js,内容如下
    2. console.log("hello world");
    3. # 通过node命令运行
    4. node helloworld.js
    1. npm init
    2. npm install mysql
    3. # 编写index.js,内容如下
    4. # 运行
    5. node index.js
    6. # 访问 localhost:8888 即可在控制台看到数据
    ```javascript var mysql = require(‘mysql’); var http = require(‘http’);

http.createServer(function (request, response) {

  1. // 发送 HTTP 头部 
  2. // HTTP 状态值: 200 : OK
  3. // 内容类型: text/plain
  4. response.writeHead(200, {'Content-Type': 'text/plain'});
  8. var connection = mysql.createConnection({
  9.     host: 'localhost',
  10.     port:3306,
  11.     user: 'root',
  12.     password: 'root123',
  13.     database: 'edu_56'
  14. });
  16. connection.connect();
  18. connection.query('SELECT * from edu_teacher', function (error, results, fields) {
  19.     if (error) throw error;
  20.     console.log('The solution is: ', results);
  21.      // 发送响应数据 "Hello World"
  22. response.end(results);
  23. });

}).listen(8888);

// 终端打印如下信息 console.log(‘Server running at http://127.0.0.1:8888/‘);

  2. 4. 安装taobao的npm源
  3. ```bash
  4. npm i -g cnpm --registry=https://registry.npm.taobao.org

vue-cli

  1. 安装

    1. cnpm install -g @vue/cli
    2. vue -V

  2. 创建项目

    1. # cmd
    2. vue create my-project
    3. # 界面
    4. vue ui

    image.png

image.png
image.png
image.png
image.png

  1. cd vue56
  2. npm run serve
  3. # 访问 IP:8080 看到界面

作业

  1. 完成讲师管理练习，新增一个修改讲师的功能，点击修改则弹窗，修改完成后刷新列表
  2. 创建并运行一个vue脚手架项目