目录
后端样例目录结构：
编辑pom.xml文件
连接数据库信息（mysql）： config.properties
全部配置文件：mybatis-config.xml
包装sqlSessionFactory（减少代码耦合）
实体类food:
编写mapper.xml
mapper接口:
完整代码（测试）：
后端实例：(前后交叉)
登录：
vue创建：
前置准备：（安装axios和element组件）
登录页面：
创建路由：
App.vue文件：（应用程序入口点的 App.vue 组件）
解决跨域问题：
vue.config.js文件下：
后端样例
目录结构：
pom.xml文件
<!--作用：连接池来管理数据库连接--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.22</version> </dependency> <!--作用：JDBC驱动程序允许Java程序与MySQL数据库进行交互--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.32</version> </dependency> <!--作用：一个服务器程序(servlet)，目的是和浏览器交互并且生成动态的web内容--> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <!--作用：数据库交互支持自定义 SQL、存储过程以及高级映射。--> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.13</version> </dependency> <!--日志输出到标准输出到控制台--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-simple</artifactId> <version>1.7.36</version> </dependency> <!--作用：测试类工具提供@Test注解--> <dependency> <groupId>org.junit.jupiter</groupId> <artifactId>junit-jupiter-api</artifactId> <version>5.9.2</version> <scope>test</scope> </dependency> <!-- Java 对象和 JSON 字符串之间进行转换--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>2.0.21.graal</version> </dependency>
连接数据库信息（mysql）： config.properties
driver=com.mysql.cj.jdbc.Driver url=jdbc:mysql://localhost:3306/数据库名?serverTimezone=GMT username=root password=1234
全部配置文件：mybatis-config.xml
<?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="config.properties" /> <!--实体类名与表名转换--> <typeAliases> <package name="dao"/> </typeAliases> <!--通过上面引入的resource="config.properties"--> <environments default="development"> <environment id="development"> <transactionManager type="JDBC"/> <dataSource type="POOLED"> <property name="driver" value="${driver}"/> <property name="url" value="${url}"/> <property name="username" value="${username}"/> <property name="password" value="${password}"/> </dataSource> </environment> </environments> <!--加载某包下所有的映射配置文件--> <!--如果没有在 mybatis-config.xml 中引入 UserMapper.xml，那么 MyBatis 将不知道 UserMapper.xml 文件中定义的任何 SQL 语句，也无法将这些语句与 UserMapper 接口中的方法关联起来。--> <mappers> <package name="mapper"/> </mappers> </configuration>
包装sqlSessionFactory（减少代码耦合）
private static SqlSessionFactory sqlSessionFactory;
static {
try {
String resource = "mybatis/mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
throw new RuntimeException(e.getMessage());
}
}
public static SqlSessionFactory getSqlSessionFactory() {
return sqlSessionFactory;
}
实体类food:
。。。
编写mapper.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="mapper.FoodMapper"><!--命名空间:用于标识这个Mapper的作用域--> <!--列名映射，如果字段不一致--> <resultMap id="FoodMap" type="food"> <id property="foodId" column="food_id"/> <result property="foodName" column="food_name"/> <result property="foodPrice" column="food_price"/> <result property="foodImgUrl" column="food_img_url"/> </resultMap> <!--id:方法名 resultMap:里面写的上面编写的id--> <select id="selectAllFoods" resultMap="FoodMap"> SELECT food_id,food_name,food_price,food_img_url FROM food </select></mapper>
mapper接口:
public interface FoodMapper { // 方法名对应上面.xml里面的id List<Food> selectAllFoods();}
完整代码（测试）：
@Test
public void login() throws IOException {
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryUtil().getSqlSessionFactory();
SqlSession sqlSession = sqlSessionFactory.openSession();
FoodMapper foodMapper = sqlSession.getMapper(FoodMapper.class);
List<Food> foods = foodMapper.selectAllFoods();
System.out.println(foods);
// 如果进行非查询操作，写入数据库需要提交：sqlSession.commit();
sqlSession.close();
}
后端实例：(前后交叉)
登录：
@WebServlet("/userLogin")
public class UserLogin extends HttpServlet {
/*将注册用户信息存入数据库*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
// 定义全部变量
ServletContext servletContext = request.getServletContext();
// 通过servlet获取前端数据
String username = request.getParameter("username");
String password = request.getParameter("password");
/*密码加密*/
password = SecureUtil.md5(username+password);
/*创建session工厂：调用工具类*/
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryUtil().getSqlSessionFactory();
SqlSession sqlSession = sqlSessionFactory.openSession();
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
/*获取用户信息*/
User user = userMapper.checkAccount(username, password);
HashMap<String, Object> result = new HashMap<>();
sqlSession.close();
if(Objects.nonNull(user)){
result.put("user",user);
result.put("code",200);
servletContext.setAttribute("user",user);
}
// 设置HTTP响应的内容类型和字符集（这里是用的json相应的）
response.setContentType("application/json;charset=UTF-8");
String jsonString = JSON.toJSONString(result);
// 通过调用response.getWriter()方法，Servlet容器（如Tomcat）提供了一个PrintWriter对 象，该对象可以用于将字符数据写入HTTP响应体中。
try (PrintWriter out = response.getWriter()) {
out.println(jsonString);
} catch (IOException e) {
throw new RuntimeException(e);
}
}
}
vue创建：
找到项目创建的文件夹下：输入cmd打开黑窗口
前置准备：（安装axios和element组件）
终端输入以下命令
npm install axios
npm i element-ui // element一个组件可以选择不添加
main.js（或有时命名为 main.ts 如果项目使用 TypeScript）通常是项目的入口文件。这个文件是构建和启动 Vue 应用程序的起点
import Vue from 'vue'
import App from './App.vue'
import router from "@/router/index.js"; //引入路由的index.js
// 引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
// 使用element组件
Vue.use(ElementUI);
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
//main.js是程序的入口登录页面：
<template>
<div class="login" id="root">
<form>
<div class="header">登录</div>
<div class="container">
<input type="text"
v-model="username"
id="username"
autocomplete="off"
placeholder="请输入用户名"
/>
<span class="left"></span>
<span class="right"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>
<div class="container1">
<input type="password" v-model="password" id="password" autocomplete="off" placeholder="请输入密码"/>
<span class="left"></span>
<span class="right"></span>
<span class="top"></span>
<span class="bottom"></span>
</div>
<button type="button" class="btn" @click="login">登录</button>
<button type="button" class="btnr" @click="register">注册</button>
</form>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
import http from "@/api/http"; // 导入服务器路径(跨域处理)
import router from '@/router'; // 导入路由切换组件
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
http.get('/userLogin',{ // 引入http(导入的服务器路径)
params:{
username: this.username,
password: this.password
}
}).then(loginResult => {
if (loginResult.data.code == 200) {
router.push("/meal");
}else{
alert("账号或密码错误，请重试")
}
}).catch(err => {
console.log('登录时出错:', err);
});
},
register(){
router.push("/register")
}
}
};
</script>
<!-- scoped仅对当前页面有效，防止css样式对其他页面造成影响 -->
<style scoped>
@import '../css/login.css';
</style>创建路由：
//1 引入路由对象
import VueRouter from "vue-router";
import Vue from "vue";
//2.引入vue:@直接转到src路径下
import Login from "@/components/LoginApp.vue";
Vue.use(VueRouter);
//创建路由对象
var router = new VueRouter({
routes: [
{
path:"/",
component:Login
}
]
})
//将路由对象暴漏出去
export default router;
App.vue文件：（应用程序入口点的 App.vue 组件）
<template>
<div>
//<router-view/> 是一个功能性的组件，它本身不渲染任何内容。它的作用主要是作为占位符，Vue Router //会根据当前的路由配置，动态地将对应的组件渲染到 <router-view/> 的位置。
<router-view/>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>解决跨域问题：
在src下api下创建http.js
import axios from "axios";
// 配置
var http = axios.create({
baseURL:"http://localhost:8080/api" // 代理服务器路径
})
export default http;vue.config.js文件下：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false, // 配置：文件名不必驼峰命名
// 代理服务器：解决跨域问题
devServer:{
proxy:{
"/api":{ // 拦截路径中含有api的
target:"http://localhost:8088",
changeOrigin:true,
pathReWrite:{
"^/api":"" //将所有api和前面的路径重写为字符串""和目标路径拼接
}
}
}
}
})
