前端后端分离小项目


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

开发环境

  • 前端技术 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/

遇到的问题

  1. 当index.vue 通过 $router.push 跳转到 更新表单数据界面 渲染表表数据怎么传递参数

  2. 插槽的不熟悉, slot-scope=’”” 通过 scope.$data,acope.row 可以拿到数据 scope.row.xx

  3. 在插槽中定义的事件方法中,会传index,row 两个参数

  4. 在进行添加操作的时候,前端一直500报错,后端报主键值为空的问题,是因为post请求数据库传递的数据是json格式,需要在后端控制器的接口对应方法的参数加上@RequestBody

小总结

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

第一种

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

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

image-20201122163910589 image-20201122163931996

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

第二种

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

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

image-20201122163652774 image-20201122163826307

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

由于动态路由也是传递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);
    }

@RequestBody主要用来接收**前端传递给后端**的**json字符串中的数据的**(请求体中的数据的);

@CrossOrigin //解决跨域问题 前端8080端口访问后端8989端口

实现效果

主页

image-20201123235211996

按书名查找

image-20201123235346117

添加

image-20201123235251417

修改

image-20201122165345757

删除

image-20201123235435089 image-20201123235450601

献上源码

后端源码

前端源码

如何启动:

1)克隆项目:git clone https://github.com/fejxc/springBoot/tree/master/book-management

2)将book.sql文件导入数据库 文件在项目的resources目录下

3)启动项目 默认端口是8989 访问 localhost:8989

说明:已经将前端代码打包加到后端,直接运行后端项目,即可。


文章作者: fejxc
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 fejxc !
评论
  目录