1.网页注册Demo（实现简单web注册到数据库）：web前端+java后端+mysql数据库
2.全文5607字，多图
标签
#本人初学者#，#仅供学习交流，其他用途与本人无关#，#侵权必删#，#转载标明出处#，#java服务端#，#web前端#，#vue-cli脚手架#，#node.js#，#MySql数据库#，#mybatis#，#注解开发#，#web注册Demo#，#多图#
声明：
1.欢迎各位朋友转载，但是请注明文章出处，附上文章链接。
2.所有文章均为个人学习心得，部分学习视频过程中的截图如有侵犯到作者隐私，可联系我删除。
3.欢迎各位朋友多交流学习，本人对自己的文章进行不定期的修正与更新，因此请到我的博客首页查看某篇章的最新版本。
创建项目，配置环境
新建项目，选择Jakart EE
Template : web application
Application server : Tomcat xxxxx [需要去官网下载]
(Tomcat version 10 以上的版本支持jakarta,同时jdk版本要在17以上)
(Tomcat version 8 的版本只能用javax,不支持jakarta,jdk版本在1.8以上)
删除没有用处的代码，整理好项目目录:
1.pom.xml 核心配置文件，需要配置仓库后才能使用【网上有教程】，用到的所有库，都要在这里面导入，不存在的库会自动下载
(1)junit不需要可以删除
(2)版本号改为17
(3) dep中，暂时保留jakarta即可
(4)添加dep:配置好仓库后，会自动下载
<1> mysql-connector-java 用于连接数据库
<2> mybatis 用来操作数据库
<3> logback 日志
<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.47</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.1</version> </dependency> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.2.3</version> </dependency> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-core</artifactId> <version>1.2.3</version> </dependency>
2.整理目录结构，删除选中的文件和包,新建包
整理后为
3.配置数据库
(1)在resources中新建两个文件
<1> db.properties 你要连接的数据库信息：我这里连接的是db3数据库
驱动：com.mysql.jdbc.Driver ，低版本的mysql-connector-java中，可能是com.mysql.Driver
数据库地址:jdbc:mysql://xxx.xxx.xxx.xxx:3306/xxx
（协议名://IP地址:端口号/数据库名）
数据库的用户名:root
数据库的密码：你自己的密码
jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://xxx.xxx.xxx.xxx:3306/xxx jdbc.username=root jdbc.password=xxxxxxxxxx
<2>mybatis-config.xml 数据库核心配置文件
properties 标签 来导入上面的配置文件
environments 标签来选择环境，我们这里只有一个环境env1
property 来配置协议，value值和db.properties的key是一致的
mapper 用来配置数据库sql语句的接口，在dao包下，我们通常写sql语句的接口
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <properties resource="db.properties"></properties> <environments default="env1"> <environment id="env1"> <transactionManager type="JDBC"/> <dataSource type="POOLED"> <property name="driver" value="${jdbc.driver}"/> <property name="url" value="${jdbc.url}"/> <property name="username" value="${jdbc.username}"/> <property name="password" value="${jdbc.password}"/> </dataSource> </environment> </environments> <mappers> <package name="com.keyidao.sh.dao"/> </mappers> </configuration>4.创建数据库
1.可以选择其他方法（命令台、navicat等管理工具）创建数据库，我这里直接用idea了
选择添加mysql
填写后完成，可能会缺少mysql的driver，会提示你进行安装
展示所有数据库
创建数据库db3，这个数据库名是自己随便起的，要和配置文件中保持一致
继续创建表并且添加数据create database db3; use db3; create table User( id int primary key auto_increment, username varchar(20) not null , password varchar(30) not null ); insert into User(id,username,password) values(1,'keyidao1','123456'); insert into User(id,username,password) values(null,'keyidao2','23456'); insert into User(id,username,password) values(null,'keyidao3','3456');
2.数据查询测试：
我们进行数据库的查询操作，看看我们的配置是否成功。
（1）创建User类，属性和数据库的属性值保持一致，同时添加：有参构造函数、无参构造函数、get、set方法，以及重写ToString便于输出【这些都是快捷键生成：Fn+Alt+Insert】
（2）创建UserMapper映射接口，利用注释配置sql语句
注意：注释如果报错，请检查pom.xml中的mybatis是否导入正确，如果确认导入正确，可以进行刷新
（3）编写Mybatis工具类，方便进行调用
package com.keyidao.sh.util;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class MybatisUtil {
private MybatisUtil(){};
private static SqlSessionFactory sqlSessionFactory = null;
static {
String resource = "mybatis-config.xml";
try {
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
throw new RuntimeException(e);
}
}
public static SqlSession getSession(){
return sqlSessionFactory.openSession();
}
public static SqlSession getSession(boolean flag){
return sqlSessionFactory.openSession(flag);
}
public static void close(SqlSession session){
if(session!=null){
session.close();
}
}
}
(4)运行前配置tomcat
配置虚拟路径：随意配置甚至可以删除为“/”
（5）新建Test.java进行测试,执行后查询出所有结果
前端页面
1.打开项目空文件夹，创建项目，
2.打开终端，进行环境搭建：
需要下载：npm下载时加上-g 进行全局下载而非本地，管理员身份运行增加权限
node.js：运行js
cnpm：比npm下载更快的国内淘宝镜像
axios：数据传输
webpack 和 webpack-cli：包管理器
webpack-dev-server：热更新，在内存中打包，即可以运行时修改
vue :美化界面
vue-cli：脚手架，简化开发
初始化
vue init webpack xxxx
校验ESLint填写No,可以阻止代码检验
切换到项目目录，执行命令：
cnpm i启动项目
npm run dev浏览器打开后，出现欢迎页面就是成功
报错：缺什么就下载什么，我这里提示
npm install --save vue-hot-reload-api
我们使用ctrl + C 快捷键中断下载
cnpm install --save vue-hot-reload-api
使用淘宝镜像重新下载,速度快
配置前端
1.关联后台服务器
修改网页运行端口，防止与服务器端口冲突：
新建文件夹src/views/user ，我们的vue项目都放到这里面
导入路由：配置好以后，说明我们可以通过/path 访问到对应的 vue，我们删除Helloworld就可以删除首页的内容.
在根组件中，配置好三个超链接，我们可以点击进行访问
绘制前端页面
绘制欢迎页面：我们后续的所有页面代码，都是分成这三个部分。
我们使用vue2的组件(https://element.eleme.cn/#/)，在这个网站上，喜欢什么，直接粘贴代码修改即可
配合文档，我们需要安装：
cnpm i element-ui -S
然后在main.js中添加代码
我随便粘贴，然后修改一下
<template>
<div style="position:absolute;left:200px;top:200px">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
发送数据到服务器
我们配置了后台服务器地址
然后再去看虚拟路径，可以删除变为“/”
配置接收消息的接口，创建一个servlet
然后配置前端
导入axios：下载 1.5.0前的版本，最新版本(1.6.7)会出现问题无法使用
配置请求地址和参数，使用post请求发送。
进行发送测试
服务端也收到信息
我们编写sql语句，实现注册到数据库的功能
在请求时进行处理，实现注册功能，并返回“注册成功”
完成后进行测试
后台收到数据
我们重新刷新数据库，数据添加成功
最终，我们实现了从web端，注册账号并关联数据库的简单样例，这里只是做了简单演示，可以简单了解流程和实现。
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
