SpringCloud项目开发完整流程
一、新建前端Vue项目(管理后台)
先下载node.js
Node官网
然后win+r,输入cmd打开命令行窗口,输入命令node -v,检测node是否安装成功
全局安装cnpm (mac需要加上sudo),npm可以理解为前端的maven专门管理前端的js的,cnpm是国内的阿里的镜像库
npm install cnpm -g --registry=https://registry.npmmirror.com(后面地址可以省略)
成功后使用cnpm install安装,版本为3.10.0的Vue
cnpm install -g @vue/cli@3.10.0
然后就可以在某个磁盘的文件下创建项目了,将文件目录切换到你要创建的文件夹下,输入vue create 文件名(不能有大写) 进行vue文件的创建
接着就进入了下面的界面中
不选第一个默认,选择下方的自选,自己选择这个项目包含着哪儿些包
接着选择Babel、Router(路由)、Vuex(状态管理也就是管理全局参数的)、CSS PRe-processors(CSS编辑器,CSS预处理)、Linter/Formatter(一般不选,这是格式化检查,选了会很自闭)
按回车,然后输入Y,把路由变成history模式
实际应用
然后CSS预编译选择第三个Less,这个比较简单
实际应用
如果之前选了Linter/Formatter,这时候就要选第一个
还是第一个
接着出现问你,你更喜欢把这些配置放在哪儿?选那个都可以
最后问你是否将其保存为未来项目的预设?选择N
在项目构建完只后,cd 项目名,切换到你的项目中,然后添加element(UI框架)
是否全引入?选择第一个选项全引入
问你是否要加CSS预编译,因为之前已经选了Less预编译这里就输入N
语言选择中文
添加axios(vue版的ajax用于进行异步交互),vue add axios
到这里就结束了,接着就是打开HbulidX,然后左上角打开我们刚刚创建的项目目录
然后右键项目文件,使用命令行窗口打开所在目录,输入npm run serve即可运行前端项目(ctrl+c可以终止退出)
详解
1、Vue的运行过程
Vue为单页开发,只有public下的一个index.html页面,主要显示也是显示在这儿,Vue运行时会加载public下的一个index.html页面和src下的main.js文件
将App对象通过"#"id选择器,加载到public下index.html中的div id="app"中
App.vue
为了在Vue这种单页开发的模式下实现多个页面的显示,就得用到路由,将其他页面的一部分或者整个页面做成一个组件,然后根据不同的地址显示不同的组件,需要通过"router-view"标签来实现,它的作用就是路由匹配到的组件将显示在这里
通过代码可以看到,我们把src/views/index.vue组件显示到了App.vue中router-view所在的位置,然后App.vue又被引入main.js中,最后在main.js中被加载到了public下的一个index.html的id为app的div中
品牌子页面BrandIndex
通过router的子路由
显示到了views下的index.vue中的右侧内容框内
2、axios异步请求(显示数据)
上面简述了为什么会显示这些页面,这些页面这么来的,接下来就说页面中的内容数据是怎么来的。
首先是template这个标签中必须只有一个子标签,所以先写一个div,至于div中有多少其他标签就不管了,其次是新建表格什么的,先把框架搭好
上面的图是完整实现后的,下方是研发中的,需要表格中显示数据
就得让表格中:tableData(要加:不然后面的" "就不是动态数据而是文本)有对应的数据,只是这数据还是死数据
要想动态的显示数据就需要拿到对应的后台数据,就得了解axios后异步请求了。
首先要了解一下怎么拿到axios中的数据,在axios.js中一个prototype自定义函数
//例如在axios中
Vue.prototype.aa= abcd
那么就可以在其他的页面中通过this.aa()来调用
<script>
// ./表示当前路径 这是静态的写法
// import BreadEdit from './edit'
export default {
// 这是给组件取个名
name:'BrandIndex',
// created生命周期,和入口一样,一加载组件就要运行这个
created(){
// 调用下方的函数
console.log(this.aa)
}
}
</script>
了解后,我们在axios中,自定义属性prototype
// 自定义属性prototype
Vue.prototype.axios = _axios
这样在brand页面中,再用this.axios.request()发起异步请求,拿到后台返回的数据再赋值给tableData即可。
.then(response =>{})是当你请求成功后你要那返回值response做什么?
当然这时候运行是肯定会报错的,报错的原因跨域拦截(不允许其他项目访问当前项目),就是你前端是80端口,但是访问的后端是8081端口,所以就报错
这时候就需要修改后端代码允许跨域请求,允许其他项目访问后台项目,定义一个过滤器即可,在product的config下新建一个ProductConfig类
于是我们就拿到了返回值,只是返回值刚好在data里面
我们把返回的数据的response.dat赋值给tableData,就可以动态显示数据了
可以在axios中配置baseURL
第一次修改
当然为了方便,我们可以把请求方法给封装一下,封装到axios中,url传入的地址,method传入的是get还是post方法,callback传入的函数(方法)
在这里要插入一个概念
//这里response因为是单个函数可以省略括号,如果没有参数必须得有括号
response => {
this.tableDate = response.data
}
//上面的写法其实和匿名函数一样,也就是说和下面方法的是一样
//funcation表示函数,上面的写法是他的简写
function(response){
this.tableDate = response.data
}
//既然如此那么封装的函数中的callback你也就可以看作
function(response){
callback(response.data)
}
我们再修改brand中的代码
因为封装函数中是直接把response.data传入的,所以我们也就只要把response赋值给tableData即可
function(response){
this.tableDate = response
}
第二次修改
将get,post固定下来
这样brand页面只需要this.get即可,同时把这个函数写成一个方法,让created直接调用更加整洁方便。
当然以上只有get请求的方法,没有post的,实际上post请求传入的参数更加麻烦所以要特地交代,如果是get请求传递数据就直接用params属性,如果是post请求传递数据则要用data属性 并且不能传json方法,需要传递的是formData对象,该对象需要自己创建,然后调用append方法,传两个参数一个是数据名,一个是数据值,然后一个一个依次传入formData对象,传入后将formData对象赋值给data属性,由data传递给后台
//例如
fornData.append('name','张三')
再给post加上通知组件,来提示用户是否操作成功
3、引入加载组件Loading
需要先引入
import { Loading,Notification } from 'element-ui';
然后再在加载数据的代码下方写上加载时显示的文字,也就是请求之前
最后在数据被加载出来后,或者加载失败后将加载组件关闭
4、引入通知组件Notification
import { Loading,Notification } from 'element-ui';
在后台返回了ResultJson数据后,判断code是正确信息还是错误信息,最后通过组件Notification 显示给用户看
当然请求失败也需要显示
5、引入分页组件
引入分页组件后,需要将pageNo当前页,size每页显示条数传入给后台,这就涉及到参数传递了,前端的传参其实也就是params参数,params其实也就是个JSON,这里面的数据名会和后台@GetMapping注解的方法的参数进行匹配,如果对应的上就将值转到后台并赋值
后台返回的数据是对象时,前端在拿值需要看清楚对应的参数是什么
因为records才是真正的数据,因此应该绑定为tableData.records,而不是原来的tableData
在理清楚后,去Element-UI找到分页组件并引入,引入后绑定上数据即可
6、引入查询组件
去Element-UI找到查询组件并引入
通过品牌名称对数据进行查询,那么就得从前端把名称传入到后台,输入框input有个v-model可以进行双向绑定,在原传入后台的json数组query中加入name属性
点击查询按钮,查询按钮绑定了find事件,然后就通过条件去后台查,查到就从第一页开始显示
最后再给搜索框配个全局样式
7、Brand页面的增删改查功能
①查询
加载页面时需要将表格中数据加载出来,点击查询按钮能通过品牌首字母进行模糊查询
之前增加查询组件和分页组件的时候有详细描述,这里也就不细说了
②新增
在查询右边新增添加按钮,点击弹出新增通知栏
引入通知弹窗组件
弹窗默认是不显示
当按钮被点击时触发a