项目搭建

这里的报错信息是因为我弄项目的时候 用了yarn
打算更新一下脚手架版本

按照视频运行一下试试

成功了

使用IDEA打开是因为后面还要用IDEA来写springboot
路由可以简单理解为 每个路由都是用来切换页面的 点击之后页面路径变了 页面内容也变了。
这里vue前端部分选择自己喜欢使用的编辑器 我准备使用VSCode

使用elementUI

官网：https://element.eleme.cn/

安装 ElementUI

npm i element-ui -S

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

想到我的项目中是用的yarn的 于是


项目搭建完毕 把第一次的代码提交到了gitee

提交是遇到了一些问题 就是文件夹是灰色的：解决方法

但是还遇到了 就是无论如何就提交不上去，就是说我的代码没改动，所以无法提交 我删除了文件下的.git 然后再次git init然后再来提交就成功了。

主体布局

图标网站
这部分没出错
代码

后台服务搭建

解决方法

使用第二种方法解决
但是因为之前建立了springboot 所以这时出现

解决方法

参考文章
善用搜索看有人说是要下载 shell script 然后我按步骤发现自己已经下载了
明白了记得要按照这个博客弄一下

Navicat中新建数据库


在springboot中配置数据库

改成yml格式
运行springboot

对于以上爆红的解决方法这里因为不影响运行 我就先不弄了。

以下结果告诉使用服务的人 这个后台是启动中的，是可以用的
这是一个健康检查的接口

接下来应该对数据库进行操作了
通过mybatis操作数据库了。
通过接口写注解来对数据库进行操作
必须有一个bean 跟数据库表有一个一一对应

此时User.java中的属性应该要跟数据库中user表中的数据一一对应

实体之后就应该有一个接口来操作这个实体 提供一些方法给外部调用
创建一个新的包mapper 这个包就是用来提供一些api 提供数据库的一些访问方法，给外部调用

通过注解的方式就可以实现数据库的查询

一般service 是通过接口+实现类的方式来实现的。

这是应该调用mapper UserService中调用mapper
把数据查出来 再通过IUserService 返回出去 最后给Controller接口用。

新建controller包 这一层实现数据传输给前端浏览器 对外暴露我们的api的。

这部分为了更加方便 我也是在IDEA中运行的vue

在前端代码中

运行
报错

在UserController中加一个注解@CrossOrigin
重启springboot

数据已经有了

以上都是通过注解的方式 来写的sql语句
但是还有一种方式 是通过xmL来写sql语句
打开mybatis官网

将注解注释掉 使用xml方式

重新运行

解决方法

再次刷新 运行 页面已经显示数据了！！！
这里安装了一个插件 但是没重启IDEA不影响 只是先装一下这个插件MybatisX

代码
主要看springboot 以及vue目录下的代码变化 上面.idea里面的不用看

实现分页模糊查询

要对返回的结果进行一个统一的包装

这里我决定安装一下 谷歌浏览器美化json格式的插件
参考博客：详细教程：Google Chrome谷歌浏览器中安装JsonView插件（含插件压缩包）

再来写几个比较复杂的接口——分页的模糊查询
后台要提供一个分页模糊查询的接口
之前写的listUsers接口 不够通用
接口大概可以分成：查询所有的、分页查询的、根据id查询的、新增、修改、删除。
尽量让名字通用 所以改为list

改完后莫名出现爆红 参考博客：SpringBoot中@Autowired爆红原理及解决方案（转载）

在UserMapper中添加关于分页查询的代码
然后里面要穿参数
在controller中新建request包 新建UserPageRequest类 和BaseRequest的基类

多条件的分页模糊查询就已经写出来了
接下来就是要修改一下前端的代码



接下来就是对axios的一个封装
在vue目录下创建request.js 还是要移动到src/util/request.js
没有util目录 自己创建。

import axios from 'axios'

const request = axios.create({
	//baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
	 baseURL: 'http://localhost:9090',

    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
  
 // 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) // for debug
        return Promise.reject(error)
    }
)


export default request

代码

实现分页模糊查询涉及到的知识：
统一结果的封装
数据库动态查询数据的方法
前端的调用
pageHelper分页插件的使用

后台CRUD

将后台服务的增删改先写好 然后前端再去调用
首页想做会员管理 所以之前的要更改一下
在vue/views下创建user目录也就是我们的会员

这里要对代码进行一个改动 将HomeView.vue的代码剪切到User.vue中
然后因为代码的格式 所以我决定安装一个插件
参考文章：效率提升-idea插件（save action）

没安装vue.js插件的也可以安装一下，我之前就安装过了。
idea 格式化vue代码，检查语法

当然了这些插件不想安装 也是不用安装 不影响开发。

新增

后台应该有支持新增的操作，所以要在后台创建一些新增的接口，来支持前端把数据发送给后台
前端如何把数据发送到后台：通过http的方式，通过post的请求，将json数据发给后台接口，后台接口接收到数据之后，转成java对象，把java对象存储到数据库里面。

逻辑代码敲完后 新增 发现数据库有的数据 再次新增 还是可以交上去，然后什么都不输入也是可以新增上去。
但是不应该允许有同样的用户名 改一下 自动生成一个卡号 不用用户名。
前端用用户名可能会重复 使用用户名不太合理
用时间戳或者uuid都行
这里使用uuid 在pom.xml中引用

<dependency>
	<groupId>cn.hutool</groupId>
   <artifactId>hutool-all</artifactId>
   <version>5.8.0</version>
</dependency>

在userService中处理

前端不在输入用户名了 由后端自动设置，数据库表比较单薄 再加上一个创造时间。


新增用户这部分代码

新增用户 应该让id最大的在最前面 在User.xml中 增加order by id desc即可

修改

接下来开始弄修改功能：

编辑部分已完成 已经可以成功更新数据
代码

删除

接下来就是做删除部分

代码

表单校验和克隆模块

优化一下之前的增删改查
然后编写表单校验的代码 可参考element-ui官网form表单检验部分
代码

现在该做管理员部分