谷粒学院项目笔记------前端

谷粒学院项目笔记------前端

前端

• es6的对象结构

  //2、对象解构（获取对象中的属性值）
  let user = {name: 'Helen', age: 18}
  // ES6
  let { name, age } =  user//注意：结构的变量必须是user中的属性，即你想得到哪几个属性在大括号中就写对象中那几个属性的名字
  console.log(name, age)
  

• npm init -y就相当于npm init每一个都直接回车的样子

• npm install webpack为局部安装，所安装的包只对当前项目有效，npm install -g webpack为全局安装，所安装的包对只要是node管辖范围的项目都有效

• Webpack就是可以把多个静态资源文件打包成一个文件，当我们在请求这多个资源的时候，以前是要发起多次请求，每次请求都请求一个资源，现在是好多资源打包成一个文件了，则我们在请求这些资源的时候（如果是是打包到同一个文件中的资源）只需要发一次请求就行了，webpack一般是在项目开发完成后部署运行前进行

• webpack #有黄色警告且打包后的代码是进行了压缩的即代码在一行显示
  webpack --mode=development #没有警告，打包后的代码是没有进行压缩的即代码是多行缩进显示

  webpack --mode=production #没有警告，但打包后的代码是进行了压缩的即代码在一行显示

• webpack配置文件webpack.config.js

  const path = require("path"); //Node.js内置模块
  module.exports = {
      entry: './src/main.js', //配置入口文件
      output: {
          path: path.resolve(__dirname, './dist'), //输出路径就是指定打包后的那一个文件所在的文件夹（就是指定打包后的那一个文件放在哪个文件夹下），__dirname：当前文件所在路径
          filename: 'bundle.js' //输出文件，就是指定打包后的那一个文件叫啥名字
      }
  }
  

• vue-admin-template中

  • config文件夹是存放配置文件的

​ 如果你启动的时候是nom run dev则在项目启动时读取的是dev.env.js这个配置文件，如果你启动的时候是nom run prod则在项目启动时读取的是prod.env.js这个配置文件，prod.env.js和dev.env.js中可以指定后端访问地址

• build文件夹是存放项目构建的脚本文件，一般不要改

• 前端中路径中@/...@/就相当于./即表示当前目录

• 在list.vue中

      <template slot-scope="scope">      //scope表示表示整张表
          //scope.row表示表的行,scope.row.level表示表的一行的level列，这里是判断如果列的值为1则在相应的列处显示'高级讲师'，否则显示'首席讲师'
     {{ scope.row.level===1?'高级讲师':'首席讲师' }}    
     </template>
  

• 在分页中，最后的@current-change="getList" ，这里就是绑定一个点击事件，即当你点击上一页下一页或页码的时候调用哪个方法，当然在该项目中是调用得到讲师列表方法，实际上本来应该在调方法的时候把页码传进去，但在这里不用写传参的(page)，因为elementUI已经帮我们封装了，它会自己把相应的页码传进去，这里只需要指定方法就行，但是在methods:{getList}方法中要改造成能接收参数的，即能够让调用者传页数的getList(page)

    <!-- 分页 -->
    <el-pagination
     :current-page="page"
     :page-size="limit"
     :total="total"
     style="padding: 30px 0; text-align: center;"
     layout="total, prev, pager, next, jumper"
     @current-change="getList" 
    />
  

• 当用一个对象去封装数据的时候，在data中定义该对象的时候可以直接写空{}，也可以把其所有属性写出来，比如如下teacher的定义

  • 可以是空{}：

     teacher:{}
    

  • 也可以是写出其所有的属性

     teacher:{
            name: '',
            sort: 0,
            level: 1,
            career: '',
            intro: '',
            avatar: ''
          }
    

• 在api中接口中的data: 变量就可以把data后面的变量转换成json格式然后作为请求体传递

• 在路由里面写的path中可以有类似于占位符的，比如path: 'edit/:id'这个就是说当你要跳转到这个路由的时候，要跳转到地址得是前面定义的地址/edit/1，也就是edit后面得加个参数，如下面这个<router-link>这个标签就是说当点击修改的时候，会进行路由跳转，跳到哪呢，跳到/teacher/edit/'+scope.row.id，scope.row.id就是当前行的id值

  <router-link :to="'/teacher/edit/'+scope.row.id">
  <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
  </router-link>
  

• this.$route.params.id是用来获取路径中的参数的，比如这个就是用来获取当前页面的路径的参数中的id参数的值，路径的参数是在router中定义的，如path: 'edit/:id'这个路径的参数就是id

• 在页面中按ctrl+F5：强制刷新，即不管缓存的刷新

• NUXT框架：

  • 特别耗内存
  • 本身是vue框架是整合了vue的，但没有整合vue-elementui
  • 是服务端渲染框架
  • 本身没有集成axios

• js中有一个定时器方法setInterval(event,time)，就是每隔time毫秒，event就会发生一次

• 对后端而言，json就只有字符串，json就只有json格式的字符串，不存在什么json对象，json对象是对前端来说才有的，后端传给前端一个json格式的字符串，然后前端使用JSON.parse(jsonStr)将json格式的字符串jsonStr转换为json对象

• cookie中只能存字符串不能存对象，否则取出来的时候会有错误，也就是说在cookie中存的时候要先将对象转换为字符串JSON.stringify(jsonObject)然后从cookie取出json字符串后如果想转换为json对象则使用JSON.parse(jsonStr)将json字符串转换为json对象

该项目的具体项目地址：
github：https://github.com/Mia-3/guli
gitee：https://gitee.com/mia-3/guli.git