第一次独立写前后分离项目总结

开发环境

前端技术 vue + axios + router element-ui
前端开发工具 WebStorm 2019.2
后端技术 springboot + mybatis + mysql 8.0.20 + jdk 1.8
后端开发工具 Indea 2019.2

实现功能

图书的的基本增删查改
数据分页显示功能
角色权限管理（待实现）

创建vue-cli 一般步骤

//1.初始化项目  xxxx是项目名
vue init webpack xxxx

//2.安装element-ui
npm i element-ui -S  

//3.安装axios
npm install axios

//4.在main.js中添加代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import axios from 'axios'
Vue.prototype.$http=axios;

//注意 在初始化项目的时候 可以选择默认安装 router 
import router from './router'

//打包前端代码 会生成dict文件
npm run build
//将static文件 index.html 复制到springboot后端项目的 rescouces 的static目录下
//配置文件增加: spring.web.resources.static-locations=classpath:/static/

遇到的问题

当index.vue 通过 $router.push 跳转到更新表单数据界面渲染表表数据怎么传递参数
插槽的不熟悉， slot-scope=’”” 通过 scope.$data,acope.row 可以拿到数据 scope.row.xx
在插槽中定义的事件方法中，会传index，row 两个参数
在进行添加操作的时候，前端一直500报错，后端报主键值为空的问题，是因为post请求数据库传递的数据是json格式，需要在后端控制器的接口对应方法的参数加上@RequestBody

小总结

Vue中用this.$router传递参数与取值：

第一种

传递参数 – this.$router.push({path: ‘ 路由 ‘, query: {key: value}})

参数取值 – this.$route.query.key

使用这种方式，传递参数会拼接在路由后面，出现在地址栏

第二种

传递参数 – this.$router.push({name: ‘ 路由的name ‘, params: {key: value}})

参数取值 – this.$route.params.key

使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数

由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。

及通过路由配置的name属性访问

router.push 后页面表单的数据渲染

 created() {
            //渲染数据
            this.updateForm.id=this.$route.params.id;
            this.updateForm.name=this.$route.params.name;
            this.updateForm.author=this.$route.params.author;
            console.log(this.$route.params.id);
        }

解决跨域问题

@Controller
@RestController
@CrossOrigin  //解决跨域问题
@RequestMapping("book")
public class BookController {
    @Autowired
    private BookService service;

    //添加图书   @RequestBody 主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；
    @RequestMapping("add")
    public void save(@RequestBody Book book){
        service.add(book);
    }

    //查询所有
    @RequestMapping("findAll")
    public List<Book> findAll(){
        return service.findAll();
    }

    //根据id进行删除
    @RequestMapping("delete")
    public void delete(String id){
        service.delete(id);
    }
    //修改图书
    @RequestMapping("update")
    public void update(@RequestBody Book book){
        service.update(book);
    }