目录
这是开始的页面,接下来我们要到router路由下书写#login的路径
路由中的component在我们自己创建的views书写vue文件
我们现在要使用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";