day05 Router、vuex、axios

配置

router和vuex需要在创建vue项目的时候，开始的时候选择Manually select features，于是就可以在下一个创建配置讯问中选择router和vuex。

axios则需要执行命令行：

npm install axios -S

之后再在需要发送请求的view导入即可。

router实现左边点击右边打开

首先需要安装ElementUI，方法见day4 vue2以及ElementUI-CSDN博客。

在App.vue中导入框架，将<nav>、<router-view>标签移动到对应位置。其中to配置相当于servlet请求的路径。

<template>
  <div id="app">
    <el-container>
      <el-header>欢迎你</el-header>
      <el-container>
        <el-aside width="200px">
          <nav>
            <ul>
              <li><router-link to="/">Home</router-link></li>
              <li><router-link to="/about">About</router-link></li>
              <li><router-link to="/question">问题管理</router-link></li>
              <li><router-link to="/new">新页面</router-link></li>
            </ul>
          </nav>
        </el-aside>
        <el-main><router-view/></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

并在router的 index.js中配置请求路径对应的view们，相当于web.xml。其中有两种方式导入view，第一种可以直接开头import，在routers中的component中就只用写出你的模块名即可，这是静态导入，其实相当于js中的include编译指令，开始就导入自然加载速度会变快，但是动态导入往往常见一些，就比如这里可以直接在component中 ()=>import ('路径')，这样是动态导入，请求该view的时候才会加载，更灵活。

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 路由的配置
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/question',
    name:'question',
    component:() => import(/* webpackChunkName: "about" */ '../views/QuestionView.vue')
  },
  {
    path:'/new',
    name:'new',
    component:() => import(/* webpackChunkName: "about" */ '../views/NewView.vue')
  }
]
// js文件中导出一个 router 实例
const router = new VueRouter({
  routes
})

export default router

使用vuex处理用户的动作

vuex主要往外导出五个属性，在store的index.js中，state用于储存页面共享的数据，actions用于处理发出的动作，mutations用于直接操纵state中的数据，getters中对state中的数据进行再次加工，类似vue中计算属性computed。

就如图片中一样，view中用dispatch发出动作，actions使用commit将动作处理，转给mutations对state进行直接操作，前端可以直接调用state中的数据，来实现数据更新。getters的处理则直接可以前端执行{{$store.getters.方法名}}。

 store中的index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {// 共享数据
    count: 0, // 初值为零
    myNewList:[]
  },
  getters: { // 对state中的数据进行再次加工，类似vue中计算属性computed
    update(state) {
      return state.count * 10;
    }
  },
  mutations: { // 修改state数据
    change(state, value) {
      state.count += value;
    },
    sub(state, value) {
      state.count -= value;
    }
  },
  actions: { // 相应动作处理
    // 必须与dispatch中的时间名一致
    sum(context, value) {
      context.commit('change', value);
    },
    sub(context, value) {
      context.commit('sub', value);
    }
  },
  modules: { // 分模块化开发，一个模块可以有自己的state，getters，mutations，actions
  }
})

前端调用：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>当前计算的和为：{{$store.state.count}}</h2>
    <h2>当前计算的和 ✖ 10 为：{{$store.getters.update}}</h2>
    <el-button @click="add" type="primary" round>我猜你不会点击我</el-button>
    <br/><br/>
    <el-button @click="sub" type="primary" round>我可以回去哦</el-button>
  </div>
</template>
<script>
export default{
  name: "AboutView",
  methods:{
    // 求和时间处理
    add(){
      // 进行dispatch
      this.$store.dispatch("sum",5);
    },
    sub(){
      this.$store.dispatch("sub",10);
    }
  }
}
</script>

使用axios实现前后端连接

其原理是可以使用axios访问不同端口，向不同端口发送请求，有两种方式发送请求：

可以直接在view中导入axios包，直接发送请求，但是因为请求的地址往往容易变化，所以需要用第二种方式来发送请求，首先在util包中创建js页面配置baseUrl（在此导入axios包），也就是端口号，然后在api包中创建针对不同view的不同请求url，也就是请求的具体地址和请求方法以及可能的参数，将方法配置可以其他文件访问（export default），这时候就需要将配置好的js文件直接导入到view中，然后再调用方法即可。

url在view中（第一种）：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <br/>
    <el-button @click="sendRequest()" type="primary">发送axios请求，进行调用springboot项目</el-button>
    <br/><br/><br/>
    <el-table :data="this.$store.state.myNewList" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="expertName" label="专家姓名" width="120"> </el-table-column>
      <el-table-column prop="questioner" label="提问人" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="120"> </el-table-column>
      <el-table-column prop="plantName" label="农作物名称" width="300">
      </el-table-column>
      <el-table-column prop="question" label="问题" width="120"> </el-table-column>
      <el-table-column prop="answer" label="回答" width="120"> </el-table-column>
      <el-table-column prop="status" label="状态" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios"; // 引入axios库

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  methods: {
    sendRequest() {
      axios
        .get("http://localhost:8888/question/findAll")
        .then(response => {
          this.questonList = response.data.data;
          this.$store.state.myNewList = response.data.data;
        });
    },
  },
  data(){
    return {
      questonList: []
    }
  }
};
</script>

url在js文件中（第二种）：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <br />
    <el-button @click="search" type="primary">search</el-button>
    <el-button @click="add()" type="primary">add</el-button>
    <br /><br /><br />
    <el-input v-model="inputValue" placeholder="请输入id或专家姓名"></el-input>
    <br /><br />
    <el-table :data="questionList" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="expertName" label="专家姓名" width="120">
      </el-table-column>
      <el-table-column prop="questioner" label="提问人" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="120"> </el-table-column>
      <el-table-column prop="plantName" label="农作物名称" width="300">
      </el-table-column>
      <el-table-column prop="question" label="问题" width="120">
      </el-table-column>
      <el-table-column prop="answer" label="回答" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
   
  </div>
</template>

<script>
// @ is an alias to /src
import queApi from "@/api/question"; // 导入封装后的axios请求，具体见src/api/question.js

export default {
  name: "HomeView",
  methods: {
    sendRequest() {
      queApi.getQuestionList().then((res) => {
        this.questionList = res.data.data;
        this.$store.state.myNewList = this.questionList; // 数据共享
      });
    }
  },
  data() {
    return {
      questionList: [],
      inputValue: "",
      
    };
  },
};
</script>

api文件中配置：

import request from '../utils/request'; // 导入axios实例

/**
 * 调用boot端，进行/question/findAll查询
 * @returns {Promise}
 */
function getQuestionList() { // 获取问题列表
    return request({
        url: '/question/findAll',
        method: 'get'

    });
}

export default {
    getQuestionList, // 导出函数
} // 导出对象

除了findAll方法之外，还可以其他方法：

后端

注意axios支持get、post、put、delete等请求，所以可以直接按照swagger的请求规范做，还有一点要注意，需要配置后端可以接受并处理其他端口发出的各种请求，也就需要配置CorsConfig文件：

package com.zheng.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 添加映射路径
        registry.addMapping("/**")
               // .allowedOrigins("*") //
                .allowedOriginPatterns("*") //允许哪些域的请求，星号代表允许所有
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许的方法
                .allowedHeaders("*") // 允许的头部设置
                .allowCredentials(true) // 是否发送cookie
                .maxAge(168000); // 预检间隔时间
    }


}

除此之外，如果发送的是post、put请求，也就是要将传递的参数放到请求体中的，需要在获得形参之前加@RequestBody，才能将传递的参数和需要的参数一一对应。

package com.zheng.controller;

import com.zheng.entity.Question;
import com.zheng.model.Result;
import com.zheng.service.QuestionService;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * Controller整合Swagger
 */
@RestController
@RequestMapping("/question")
@Tag(name="question",description = "tb_question控制层") // swagger标签
public class QuestionController {
    @Autowired
    private QuestionService questionService;

    @Operation(description = "question查询全部") // swagger 标签
    @GetMapping("/findAll")
//    public List<Question> findAll() {
//        return questionService.findAll();
//    }
    public Result<List<Question>> findAll() {
        return Result.ok(questionService.findAll());
    }
    /**
     * findById?id=10
     * @param id
     * @return
     */
    @Operation(description = "question根据主键查询") // swagger 标签
    @GetMapping("findById")
//    public Question findById(@RequestParam("id") int id) {
//        return questionService.findById(id);
//    }
    public Result<Question> findById(@RequestParam("id") int id) {
        return Result.ok(questionService.findById(id));
    }

    @Operation(description = "根据专家名字查询")
    @GetMapping("/findByExpertName/{expertName}")
    public Result<List<Question>> findByExpertName(@PathVariable("expertName") String expertName) {
        return Result.ok(questionService.findByExpertName(expertName));
    }
    @PostMapping("/save")
    @Operation(description = "添加question")
    public Result<Integer> save(@RequestBody Question question) {
        return Result.ok(questionService.save(question));
    }
    @PutMapping("/update") // 修改只能用put请求，删除只能用delete请求
    @Operation(description = "修改question")
    public Result<Integer> update(Question question) {
        return Result.ok(questionService.update(question));
    }

    /**
     * /delete/10
     * @param id
     * @return
     */
    @DeleteMapping("/delete/{qid}")
    @Operation(description = "按照编号删除question")
    public Result<Integer> delete(@PathVariable("qid") int id) {
        return Result.ok(questionService.delete(id));
    }
}

一个好习惯是将返回的数据封装成一个Result<T>类（这也相当于一个特殊的实体类）来处理，这样当面对不同的数据类型的时候才能正常处理：

package com.zheng.model;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Result<T> {
    private Integer code; // 编码 ；200 404 500
    private String msg; // 消息内容
    private T data; // 真正的数据

    public Result(Integer code, T data) {
        this.code = code;
        this.data = data;
    }
    public Result(String msg, T data) {
        this.msg = msg;
        this.data = data;
    }
    public Result(T data){
        this.data = data;
    }

    public static<T> Result<T> ok(T data){
        return new Result(200,"success",data);
    }

    public static<T> Result<T> fail(Integer code){
        return new Result(500,"fail",null);
    }
}

前端

对于前端如何链接这么多方法呢：

如果是get、delete请求并将传递的参数直接拼接在路径中，而非键值对的形式，那么在前端也可以直接拼接在url中，不能使用参数params，否则404：

function findByExpertName(expertName) {
    return request({
        url:'/question/findByExpertName/' + expertName,
        method:'get'
    })
}

 对于post请求可以直接这样传递参数（在控制层是直接接受一个对象的类型，所以传入的也是一个对象类型，直接使用data列出要传递的参数即可），对于get、delete请求参数必须params，而post、put请求必须data传递数据：

function addQuestion(data) { // 新增问题
    return request({
        url: '/question/save',
        method: 'post', // post 请求执行添加操作
        data: data // 发送数据
    })
}

最后，做的小项目：实现findById以及findByExpertName以及add方法

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <br />
    <el-button @click="search" type="primary">search</el-button>
    <el-button @click="add()" type="primary">add</el-button>
    <br /><br /><br />
    <el-input v-model="inputValue" placeholder="请输入id或专家姓名"></el-input>
    <br /><br />
    <el-table :data="questionList" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="expertName" label="专家姓名" width="120">
      </el-table-column>
      <el-table-column prop="questioner" label="提问人" width="120">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="120"> </el-table-column>
      <el-table-column prop="plantName" label="农作物名称" width="300">
      </el-table-column>
      <el-table-column prop="question" label="问题" width="120">
      </el-table-column>
      <el-table-column prop="answer" label="回答" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  添加的对话框-->
    <el-dialog title="问题信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="questionForm">
        <el-form-item
          label="expertName"
          :label-width="formLabelWidth"
          prop="expertName"
        >
          <el-input v-model="form.expertName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="questioner"
          :label-width="formLabelWidth"
          prop="questioner"
        >
          <el-input v-model="form.questioner" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="phone" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="plantName"
          :label-width="formLabelWidth"
          prop="plantName"
        >
          <el-input v-model="form.plantName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="title" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="question"
          :label-width="formLabelWidth"
          prop="question"
        >
          <el-input v-model="form.question" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="answer"
          :label-width="formLabelWidth"
          prop="answer"
        >
          <el-input v-model="form.answer" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="status"
          :label-width="formLabelWidth"
          prop="status"
        >
          <el-input v-model="form.status" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import queApi from "@/api/question"; // 导入封装后的axios请求，具体见src/api/question.js

export default {
  name: "HomeView",
  methods: {
    sendRequest() {
      queApi.getQuestionList().then((res) => {
        this.questionList = res.data.data;
        this.$store.state.myNewList = this.questionList;
      });
    },
    isNumber(value) {
      return /^\d+$/.test(value) && value !== '';
    },
    search() {
      if (this.inputValue == "") {
        this.sendRequest();
      } else {
        if (this.isNumber(this.inputValue)) {
          this.findById();
        } else {
            this.findByExpertName();
        }
      }
    //   this.sendRequest();
    },
    findById() {
      queApi.findById(this.inputValue).then((res) => {
        this.question = res.data.data;
        if (this.question != null) {
          this.$set(this, "questionList", []); // 清空原有数据
          this.questionList.push(this.question);
        } else {
          alert("未查询到数据");
        }
      });
    },
    add() {
      this.dialogFormVisible = true;
    },
    cancel() {
      this.dialogFormVisible = false;
      this.form = {
        expertName: "",
        questioner: "",
        phone: "",
        plantName: "",
        title: "",
        question: "",
        answer: "",
        status: "",
      };
    },
    save() {
      // 验证表单
      this.$refs.questionForm.validate((validate) => {
        if (validate) {
          // 验证通过，可以提交数据
          //   alert(this.form.expertName);
          queApi.addQuestion(this.form).then((res) => {
            if (res.data.code == 200) {
              alert("添加了" + res.data.data + "条数据");
              this.sendRequest();
            } else {
              alert(res.data.msg);
            }
          });
          this.dialogFormVisible = false;
          this.form = {
            expertName: "",
            questioner: "",
            phone: "",
            plantName: "",
            title: "",
            question: "",
            answer: "",
            status: "",
          };
        }
      });
    },
    findByExpertName() {
      queApi.findByExpertName(this.inputValue).then((res) => {
        if (res.data.data == null) {
          alert("未查询到数据");
        } else {
          this.questionList = res.data.data;
        }
      });
    },
  },
  data() {
    return {
      questionList: [],
      question: {},
      inputValue: "",
      dialogFormVisible: false, // 控制添加的对话框是否可见
      form: {
        expertName: "",
        questioner: "",
        phone: "",
        plantName: "",
        title: "",
        question: "",
        answer: "",
        status: "",
      },
      formLabelWidth: "100px",
      rules: {
        expertName: [
          { required: true, message: "请输入专家姓名", trigger: "blur" },
        ],
        questioner: [
          { required: true, message: "请输入提问人", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          //   {
          //     pattern: /^1[34578]\d{9}$/,
          //     message: "请输入正确的手机号",
          //     trigger: "blur",
          //   },
        ],
        plantName: [
          { required: true, message: "请输入农作物名称", trigger: "blur" },
        ],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        question: [{ required: true, message: "请输入问题", trigger: "blur" }],
        answer: [{ required: true, message: "请输入回答", trigger: "blur" }],
        status: [{ required: true, message: "请输入状态", trigger: "blur" }],
      },
    };
  },
};
</script>