3.MidBook项目之前端准备

1.安装vscode的插件

 chinese  live server模拟前端服务器 vetur vue-helper

2.创建前端项目

1.创建项目文件夹 打开文件夹
2.将工作区另存为 (创建工作区)
3.创建html文件 右键 open with live server

3.es6 是规范,不是js特有的 下一代js标准 15年6月推出的

  //!
      {
            var a=1;
            let b=2;
    
     }
     clog(b);//let是局部的,输出不了,let只能调用一次

   //常量
     const PI="3.14";//不能改变,必须赋初始值

   //解构
      let[a,b,c]={1,2,3};  clog(a) clog(b) clog(c)
     //用得多是对象解构
     let user={name:'aa',age:18}
     let {name ,age}=user;
     //模板字符串和c语言输出一样
      let name="aaa"
     let age=12
      let info=`name is${name} age 
                   is ${age +1}`  //还加上了换行的功能
   //定义对象
      const name="xx"
      const age=20
      const user={name: name,age:age}
      //es6定义对象
        const user={name,age}
      //对象拓展运算符
          //复制对象
          let person1={name:"aa",age: 11}
            let person2={...person1}
          //不同对象的属性合并
             let person3={...person1,...person2}
            //单个变量进行合并
             var flag=0;
            let person3={...person1,flag}
         //箭头函数
                             function(a){ return a}
                var f2= a=> a; //参数和返回值
                var f3=(m,n)=>m+n;

4.vue

1. //插值表达式
2. //配置vscode 快捷键生成代码片段

   //文件--->首选项-->用户片段-->新建全局代码片段文件
   //以.code-sippets结尾  prefix就是快捷键

3.指令
//单向绑定,标签取到变量的值

 <div :style="msg">xxx</div>
   msg:"color:red;"
 //双向绑定
      <input type="text" " :value="msg"> //单向在页面改变值不会改model的值
   <input type="text" v-model="msg">

4.绑定事件

        v-on:click事件名称="show()" //change submit
    简写: @click="show()"事件名称
    methods:{
		show(){

      }

5.条件指令

  v-if="ok"
    v-else="ok"
    data:{
             ok:false
     }

6.循环指令

v-for="user in list"   v-for="(user,index) in list"
        {{user.name}}

7.生命周期(vue创建到结束的过程)

        created 页面渲染之前 通常在页面渲染前得到数据
        mounted 页面渲染之后
       created(){  debugger //做调试  } 
       mounted(){ debugger  }
     
  

5.axios

 //写个 xx.json模拟后端数据
 //引入js文件
 //方法中使用
      axios.get("路径")
              .then(response=>{       })//请求成功,包括了很多信息不止数据
              .catch(error=>{      clog(error)  })

6.node.js
//js引擎,我们原来是使用浏览器来运行js代码,它使用谷歌v8引擎
//现在可以脱离浏览器运行

1. BFF(Backend For Frontend)服务于前端的后端服务 nodejs(裁剪拼接数据)去请求后端服务,页面返回浏览器
   1. 直接安装客户端文件
   2. cmd node -v 查看版本 node 01.js 执行js
   3. 引入http包就可以 ,node xxx就可以变成前端服务器,vscode右键文件夹在集成终端打开就可以打开cmd //引入http模块

const http = require('http');
//创建服务器
http.createServer(function (request, response) {
// 发送 HTTP 头部 
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/html'});
// 发送响应数据 "Hello World"
response.end('<h1>Hello Node.js Server</h1>');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

7.npm包管理工具(类似maven) (node package manager) 下载js文件(安装node就装上了)

 npm -v //查看版本
 npm init -y //初始化npm 一直回车,多个个package.json
//修改为淘宝镜像
   npm config set registry https://registry.npm.taobao.org 
//安装镜像  //多了个node_modules文件夹,package-lock.json锁定的使用的依赖版本
   npm install jquery@2.1.2 //-D可以本工作区使用依赖,   -g全局安装
  //根据配置文件下载依赖
  npm install

8.模块化开发(controller–>service->mapper)对象与对象之间的调用,前端开发中是js之间的调用
//01.js

  export default{
          list(){},
          save(){}
   }
    // 或者export function getList(){}
     //import {getList} from './01.js'
    //02.js注入进来 调用
   import user from './01.js'
    user.list()
     user.save()
   //使用 node 02.js, 是es6版本,node不支持,使用bable转码es5
    npm install -g babel-cli
    babel --version
    //vscode报错 
     //在powershell以管理员运行  set-ExecutionPolicy RemoteSigned
   //src目录创建.babelrc配置文件
    //安装转码器
     npm install -D babel-preset-es2015
     babel src -d dist  //src的js转到dist文件夹
    //执行

9.webpack打包工具(多个js转一个js css,html…)不用多次访问多个文件
#注意-g 和-D全局和局部可能会出现冲突,需要指定-D避免

npm install -D  webpack webpack-cli   
 webpack -v 

        //写配置文件

      //命令打包
           webpack --mode=development
      //打包的文件引入js 
               <script src="dist.bundle.js"></script>
        //在package.json指定脚本
           "scripts": {
    "dev": "webpack --mode=production",
    "prod": "webpack --mode=production"
  },
          //运行
               npm run dev
       //安装安装css-loader打包css
          npm install -D style-loader css-loader 
        //修改配置文件
          const path=require("path") //Node.js内置模块
module.exports= {
	entry: './dist/moudleImport.js', //配置入口文件

    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js'//输出文件
    },
    module:{
        rules: [  
                    {  
                        test: /\.css$/,    //打包规则应用到以css结尾的文件上
                        use: ['style-loader', 'css-loader']
                    }  
                 ] 

    }
}
          //js引入css文件 ,就可以css文件变成js文件了
              export.info=function(str){
                     document.write(str)
                }
              const a=require('./01.js')
               require('./style.css')
       webpack --mode=development

10.使用vue-admin-template前端开源项目

1. 目录结构 build目录放webpack的配置文件
   config放后端配置 index.js 有项目的端口和 eslint插件改为false ,要使用的话安装vscodeeslint插件进行语法检查
   主要改的是 views放页面 api写接口 route写路由
2. 改项目store的数据为固定的值,不用访问后台接口,直接可以访问
3. 改写项目的流程
   1.添加路由
   2.设置跳转路径
   3.在api文件夹里面定义接口路径
   3.页面引入js axios调用接口
4. 怎么改login可以不用密码登录 改commit提交到仓库
   const data = {
   ‘roles’: [
   ‘admin’
   ],
   ‘name’: ‘admin’,
   ‘avatar’: ‘https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif’
   }
   if (data.roles &&data.roles.length >0) { // 验证返回的roles是否是一个非空数组
   commit(‘SET_ROLES’, data.roles)
   }
   commit(‘SET_NAME’, data.name)
   commit(‘SET_AVATAR’, data.avatar)

11.医院设置

1. 改api用模板字符串改restful的值
2. request 用data属性可以通过json传递 params用普通参数传递
3. created通常调用methods的方法
4. export default{ data(){},created(){} } 是导出对象,然后统一给vue对象处理
5. 跨域问题 访问协议,地址,端口号 不同 controller加上 @CrossOrigin 记得要在过滤器统一状态码管理
6. ===值和值的类型是相同的
7. 分页 @current-change=“getList方法” 会自动传页数
   getList(page=1){}//默认值
8. 对象不写key和值也可以初始化.v-model=“obj.name”
9. 直接用插槽template判断 scope可以得到列表遍历的值
10. 复选框 el-table会遍历 @selection-change=“xx” 复选框的事件

12.添加医院设置

      //在router.js文件写页面跳转
       this.$router.push({path:'/hosp/hospitalSet/list'})
      //路由跳转。,设置路由路径为 edit/:id
       <router-link :to="/xxx/"+id>
     //跳转到的页面 得到路由地址的传过来的参数
         this.$route.params.id
      //添加和修改共用一个页面,需要判断,会产生值没有清空的bug,created只执行一次
      //这个叫组件重用问题,在AppMain.vue的计算属性添加key()方法随机产生key
         export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  }
}

13.路由path必须不一样 一个组件可以对应多个path

 { 
        //!!!!一定要写/ ,绝对路径不然找不到
        path: '/hospitalSet/edit',
        name: 'Tree',
        component: () => import('@/views/hosp/hospitalSet/form'),
        meta: { title: '医院添加', icon: 'tree' }
      },
      {
        path: 'hospitalSet/edit/:id',
        name: 'Tree',
        component: () => import('@/views/hosp/hospitalSet/form'),
        meta: { title: '医院编辑', icon: 'tree' },
        hidden:true //可以不让遍历,显示在页面
      }

14.data数据可以直接赋值给对象,整个对象都给他了,不会舍弃成员