科研开发二总结-vue篇

项目启动

1. 创建项目 vue create kykf_qd
2. 安装对应的包 需要使用到store, elementUI,router,axios,
3. 项目目录
   

配置启动

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)

import store from './store'

import ElementUI from 'element-ui';

Vue.config.productionTip = false
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import axios from 'axios'
Vue.prototype.$axios = axios;   // 为了任何地方都可以直接使用 this.axios 做异步请求

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

router.js

// 导入对应的视图和组件
import Vue from 'vue'
import Router from 'vue-router'
import SignIn from './views/SignIn.vue'
import Recording from './views/Recording.vue'
import TeacherBuildRecording from './views/TeacherBuildRecording.vue'
import TeacherQueryRecording from './views/TeacherQueryRecording.vue'
import TeacherManageStudent from './views/TeacherManageStudent.vue'
import SignUpComp from './views/SignUpComp.vue'

Vue.use(Router)
export default new Router({
  mode:'history',     // history 模式可以取消搜索栏的 # 
  routes: [
    {
      //登录界面
      path: '/',
      name: 'SignIn',
      component: SignIn
    },
    {
      // 注册界面
      path:'/signUp',
      name:'/SignUp',
      component:SignUpComp
    },
    {
      // 进入 签到系统主界面
      path:"/recording",
      name:"Recording",
      component:Recording,
      
      children:[  // 签到系统的子界面 // 这里进去之后可以再次使用 <router-view/> 
        {// 创建签到
          path:"/teacherBuildRecording",
          name:"TeacherBuildRecording",
          component:TeacherBuildRecording,
        },
        {// 查询签到记录
          path:"/teacherQueryRecording",
          name:"TeacherQueryRecording",
          component:TeacherQueryRecording,
        },
        {// 教师管理学生
          path:"/teacherManageStudent",
          name:"TeacherManageStudent",
          component:TeacherManageStudent,
        }
      ]

    },
    {
      // 关于网站信息界面
      path: '/about',
      name: 'about',
      component: function () { 
        return import(/* webpackChunkName: "about" */ './views/About.vue') // 第二种方式导入 组件
      }
    }
  ]
})

路由的使用

<router-link to="/home">跳转到对应的界面</router-link>
<router-view/>       // 显示对应的路由界面
js 使用手动更改路由跳转
this.$router.push("/");

路由更多的使用参考

this.$router.push、replace、go的区别

"router-link"各种属性解释

vue中this.$router.push路由传参以及获取方法

store.js // 这里可以存放一些初始的信息，如果临时修改信息，刷新页面这里的数据会丢失

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    teacherId:"",
    tableData:"", //签到的信息表,
    studentTable:"",//学生信息表
  },
  mutations: {
  },
  actions: {
  }
})

store.js，在其他地方的使用store数据和修改数据方法

this.$store.state.tableData =""; //这样就可以修改或者获取数据数据

具体操作总结

axios 总结

1. axios post 操作，请求体参数

      // 注册任务
      this.$axios({
          method:"post",
          url:"http://localhost:8081/recording/sign_up",
          headers:{
              'Content-type':'application/json'
          },
          data:{
            "teacherId":this.teacherId,
            "teacherPassword":this.teacherPassword,
            "teacherName":this.teacherName,
            "teacherSignUpDate":this.getCurrentTimeMethod()
          }
      }).then(data=>{
        console.log(data.data)  // data.data 是实际的返回数据
        this.$store.state.teacherId = this.teacherId;
      })

2. axios 的 put 操作

    // 更新学生签到记录
    submitStudentRecording(){
      this.$axios({
        method:"put",  // 参数，请求头类似可以写上，此处省略
      }).then(data=>{
        console.log(data.data)
      })
    },

3. axios 的 post 方式的 请求参数

      // // 传入之前的学生信息 传入修改的学生信息
      var params = new URLSearchParams();    // 这个类是自带的，要使用axios 传请求参数，必须使用此方式封装
      params.append("studentId",this.editStudentTableStudentId);
      params.append("teacherId",JSON.parse(sessionStorage.getItem('teacherTable')).teacherId);
      params.append("studentAfterId",this.formEdit.studentId);
      params.append("studentAfterName",this.formEdit.studentName);


      this.$axios({
        method:"post",
        url:"http://localhost:8081/recording/recording_editStudent",
        data:params,
        headers:{
            'Content-type':'application/x-www-form-urlencoded'       // 表单方式提交
        },  
      }).then(data=>{
        console.log(data.data);
      })

4. axios 的delete 操作，url 路径参数

      this.$axios({
          method:"delete",
          url:"http://localhost:8081/recording/student_manage/"+studentId,
        }).then(data=>{
          console.log(data.data);
          console.log("删除学生信息")
        })

5. get 方式

this.$axios({
        method:"get",
        url:"http://localhost:8081/recording/student_info/"+row.studentId,      // header 就可以不写了
      }).then(data=>{
          console.log(data.data);
      })

sessionStorage总结，如何保证关闭浏览器清除用户数据

解决方案：LocalStorage、sessionStorage
H5的本地保存localStorage、sessionStorage用法总结