SpringCloud电商项目开发完整流程

最新推荐文章于 2024-05-18 22:33:00 发布

web15085599741

最新推荐文章于 2024-05-18 22:33:00 发布

阅读量677

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/web15085599741/article/details/126079862

版权

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事件，然后就通过条件去后台查，查到就从第一页开始显示
在这里插入图片描述
最后再给搜索框配个全局样式