全新交友盲盒+付费进群二合一源码 包含全套源码+教程

eelq

关注

阅读 25

2024-05-27

目录

第一步环境搭建

后端:

前端:

第二步画流程图

web:

service:       

dao层:

 第三步前端代码的实现

这是开始的页面,接下来我们要到router路由下书写#login的路径 

路由中的component在我们自己创建的views书写vue文件

#/success的success.vue文件

第四步:后端代码的实现

web层loginServer类

web层registerServlet类

 service的userServiceImpl类

 dao层

第五步测试


我们现在要使用vue,mybatis,mysql实现一个简单的登录注册页面功能

使用的数据库:

第一步环境搭建

后端:

在idea创建web工程

创建成功

创建成功后把pom.xml文件中关于junit的依赖全部删除,我们不需要

接着在pom.xml中导入相关依赖

 接着在resource目录下创建mybatis-config.xml文件

创建jdbc.properties文件

创建logback.xml文件

这样一来我们后端的环境搭建好了,我们可以启动一下,查看是否报错

然后我们在java目录中创建pojo包封装数据库表的类

在pojo包下创建出对应的类之后,把id的类型改成Long对象型 

前端:

 在vscode中创建vue工程

生成完成

 

然后在package.json中导入axios依赖

注意如果版本太高,npm run dev会报错

之后再vue文件中使用axios时,需要在<script></script> 中加上import axios from 'axios'; 

把前端的端口号改成8090,不然于tomcat服务器冲突 

这样一来我们的环境已经搭建完成

第二步画流程图

实现登录功能

 第三步前端代码的实现

这是开始的页面,接下来我们要到router路由下书写#login的路径 

注意:在路由的路径不用写# 

路由中的component在我们自己创建的views书写vue文件

login.vue代码

启动前端项目

 点击登录,并查看抓包

注意:抓包的username是 let params=`username=${this.user.username}&password=${this.user.password}`;

axios的请求参数左边的usernmae 

后端使用request接收前端的数据就要使用username来获取 

#/success的success.vue文件

 

 #/register的register.vue文件

第四步:后端代码的实现

先实现     //后端服务器的路径
                let url="http://localhost:8080/loginServlet";

web层loginServer类

web层registerServlet类

 service的userServiceImpl类

 dao层

第五步测试

精彩评论(0)

0 0 举报