前端技术栈：HTML+CSS+Ja【【微信】】+Vue3 后端技术栈：JavaSE+MySQL+JDBC+【【微信】】

本文项目或许不符合现实生活，无所谓，那是博主给自己做的笔记 如果认真的跟着敲了，发现有问题，欢迎私信或评论区讨论

数据库和Dao层代码采用基于JavaSE的淘宝卖鞋后端管理系统的设计与实现

【易错点】：的值要与postman后端匹配

在这里实体类和数据库不再重复写

一、dao包

其实就是个查询，登录的查询关注的是查没查到 ，返回值是布尔类型

二、service包的

三、是controller包的

1、继承 2、加注解，写路径 3、重新 方法

后端写完后用Postman测试：

新建一个前端项目，在创建时勾选上Router选项，因为有跳转

创建好项目后分别安装 框架、和框架

在文件中导入一个css文件用于在页面中加图标

同时还要加个路由守卫

路由守卫目的是除了登录视图外，其他视图的访问必须是登录过的用户，如果未登录，则跳转到登录页； 如果已登录，则正常进行路由跳转。

下一步清空项目中生成的无用代码和组件

在根组件中只留一个路由出口

在views文件夹中生成和两个视图

下一步在文件中导入两个视图及路由配置

在 中加点样式 style，让他撑满整个整个父标记

在登录视图中：

然后加点样式

接下来在data 配置 v-model 的两个数据（name和password）

完成绑定后后编写方法加在，用 login 发请求，发请求就要导包

qs包是发送 get 请求，get 请求数据是拼接在地址里，所以暂不需要

输入正确的用户名和密码后点击登录，在页面上方弹出提示框提示成功，否则是提示失败 如果显示成功要完成到首页的跳转，如果失败那就接着跳转

【代码解释】： 当输入用户名和密码后，点击登录按钮，就会触发 函数。该函数使用 库发送一个 GET 请求到指定的 URL，其中包含用户名和密码，等待服务器响应。如果响应返回了“成功”，就将用户名存储在浏览器的 中，然后将用户重定向到“index”页面。如果响应返回其他内容，则表示登录失败，将清空用户名和密码，并将 设置为 ，以便在界面上显示错误消息。

首页视图代码：

随后加上样式代码

插值语法中是个 name，需要在中做个配置

name 从会话存储中获取到的，需要写到挂载完成的钩子函数里面，挂载完毕取出会话里的数据赋值给 name

随后登陆成功

对于后端增删改查这里只写（按顺序）dao、service、controller 查看代码注解

这里查询方法名字的是

dao包：

service包：

对于查询、添加、修改有多个数据，这里写个dao类封装

controller包：

postman 测试：

在前端视图文件夹下新建文件夹shop，在里面新建视图Shop【【微信】】

首先在首页配置下加上查询商家的配置路由对象

然后

这里的方法用的是

dao包：

service包：

controller包：

后端测试：

首先在 index.js 中加上配置的子路由

回到插入视图，在 methods 内 push 上地址：addshop

然后新建视图 ShopAddView，在视图里加一些输入框

这里的数据是跟controller类中的取数据的名字一致

v-model 是绑定到一个对象里的几个属性

在 data 中加入要添加的内容

然后导入 qs 和 axios 框架，

接下来在 methods 内编写 addshop 方法，这里的名字与前面添加按钮事件中名字一样

回答查询页面会发现多了条刚才添加的数据

下面给添加商家加点样式，进行表单校验，检查添加的输入框是否为空。如果有任意一个输入框为空，则会展示相应的提示消息，同时不会发送请求。

输出效果：

删除方法用的是

dao包下：

service包：

controller包：

后端测试：

在查询视图下

接下来给删除商家功能加点小样式：当商家仍有商品在出售时，不可以删除

首先在后端service包内，删除功能改成：

先在食品表中查商家ID，然后到商家表中删商家ID

dao包代码：

controller包代码：

前端代码：

回头来写

方法用的是：

dao层：

service层：

controller层：

index.js文件夹下

查询视图

修改视图：ShopUpdateView

首先在主页面视图中让他有个跳转

在 index.js 文件中配置子路由

这里是希望同一个查询按钮既能查到鞋子名字，又能查到他所属商家名字

dao类代码：

service代码：

controller类代码：

这里做了个下拉框显示商家名字，在点击新增按钮的时候，可以选择商家

【【微信】】方法

dao包：

service包：

controller包：

之前查询的时候已经导入的 qs框架，所以这里不必重复 在查询视图下的 methods 内加上：【【微信】】方法

新建【【微信】】视图，在 index.js文件内加上路由配置

【【微信】】视图：

【【微信】】 方法

dao包代码：

service包：

controller包：

在查询视图下加上 【【微信】】 方法（在写查询时已经定义此方法）

用session方法修改

dao 包代码：

service 包代码：

controller包代码：

在查询页面中加上 方法

新建视图：GoodsUpdateSessionView

在 index.js 文件中配置路由

修改视图页面：

接下来可以改改样式

..天猫助力次数,天猫助力次数,互助群微信免费加入2023吗,我加入了一个2023年天猫618 狂欢盛典群、互帮互助的618 年中大促2023最新互助微信群名称大全，你愿意一起加入吗？