山东大学软件学院创新实训——项目记录（二）

0.主要任务

本周主要对基本页面进行搭建，以及对一些问题和解决方案进行记录。

1.vue文件基本格式：

<template>
  <div>
  </div>
</template>

<script>
export default {
  name:'LOGIN',
  data(){
    return{
    }
  },
  methods:{
  },
}
</script>
<style>
</style>

2.登录

js-cookie的使用，在系统运行时，要保存从前端返回的医生信息，有localstorage和cookie两种方式，这里选择更熟悉的cookie来保存信息。

npm i js-cookie -S

//导入使用

import Cookies from 'js-cookie'

Cookie.set('user',obj) //默认失效时间为网站关闭时间
Cookie.set('user',obj,{expire: 1})  //一天过期

Cookie.get('user') //获取cookie数据

3.前端axios的封装js文件

本次项目的前后端交互选择同步式的轻量HTTP 客户端，它可以在客户端发起 HTTP 请求，并且支持许多现代的功能，如拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据等。

import axios from "axios";
import router from "@/router";
import Cookies from 'js-cookie';


const request=axios.create
({
    baseURL:'http://localhost:9090',          //!!后台的地址
    timeout: 5000
})//create方法new了一个axios对象叫reques

//requset,用于前端向后端发送请求拦截器
//可以在请求发送前对请求做一些处理
//比如统一加token，对请求参数统一加密

request.interceptors.request.use(config =>{
    config.headers['Content-Type']='application/json;charset=utf-8';
    const admin=Cookies.get('admin')
    if(!admin){
    router.push('/login');
    }
    //config.headers['token'] =user.token;//设置请求头
    return config
},error => {
    return Promise.reject(error)
    }
)


// response拦截器，用于处理后端返回数据
// 用于在接口响应后统一处理结果
request.interceptors.response.use(
    response=>{
        let res=response.data;
        // 兼容服务端返回的字符串数据
         if(typeof res ==='string'){
             res=res?JSON.parse(res):res
         }
          return res;
    },
    error => {
        console.log('err'+error)
        return Promise.reject(error)
    }
)


export default request

4.强制设置对象属性

Vue.js 通常会在实例化时对 data 对象中的属性进行响应式处理。这意味着当你直接添加一个新的属性时，Vue.js 可能无法监听到这个变化，导致该属性的变化无法触发视图的重新渲染。为了解决这个问题，Vue 提供了 this.$set() 方法，用于手动将属性添加到响应式对象上。

//1.对象 2.对象的属性名称 3.对象属性值
this.$set(this.form,'bookName',res.data.name)