技术栈:vue2.0+ssm
流程图:
前端:
1.新建vue项目
vue init webpack 项目名
2.安装所需的依赖
//安装element组件库
npm i element-ui -S
//在main.js中引入element组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//安装 scss 和 scss-loader
npm install scss-loader scss --save
// 安装 node-sass 和 sass-loader
npm install sass-loader@7.3.1 --save
npm install node-sass@4.14.1 --save
在 build 文件夹目录下 webpack.base.conf.js 文件中,找到 rules 添加以下代码
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
3.设计并编写页面
4.接口对接
首先解决跨域问题
proxyTable: {
'/api': {
target: 'http://localhost:8080/', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://localhost:8080/' //路径重写
}
}
},
安装axios
import axios from "axios";
//利用vue的原型属性,方便调用
Vue.prototype.$axios = axios;
对于axios的封装参考以前写的另外一篇博客
利用原型链和闭包进行封装自定义的js模板:
然后可以开始进行接口对接
后端:
1.数据库设计及建表
create table user(
username varchar(32) not null primary key,
password int not null,
phone int not null
);
2.新建后台项目,基本环境搭建
新建基本框架结构
pojo
dao
service
controllerapplicationContext.xml //整合资源
mybatis-config.xml //映射
3.Mybatis层编写
数据库配置文件 database.properties
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=true&useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=root
编写核心配置文件,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>
<typeAliases>
<package name="pojo"/>
</typeAliases>
<mappers>
<mapper resource="dao/userMapper.xml"/>
</mappers>
</configuration>
dao层编写用户类
package pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data//提供get,set,toString方法
@AllArgsConstructor
@NoArgsConstructor
public class user {
private String username;
private int password;
private int phone;
}
编写usermapper
package dao;
import pojo.user;
import java.util.List;
public interface userMapper {
//增加一个User
int addUser(user user);
//根据id删除一个User
int deleteUserByUserName(String userName);
//更新User
int updateUser( user user);
//根据id查询,返回一个User
user queryUserByUserName(String userName);
//查询全部User,返回list集合
List<user> queryAllUser();
}
usermapper.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="dao.userMapper">
<!--增加一个用户-->
<insert id="addUser" parameterType="user">
insert into ssmbuild.user(username,password,phone)
values (#{username}, #{password}, #{phone})
</insert>
<!--根据username删除一个user-->
<delete id="deleteUserByUserName" parameterType="String">
delete from ssmbuild.user where username=#{username}
</delete>
<!--更新User-->
<update id="updateUser" parameterType="user">
update ssmbuild.user set username = #{username},password = #{password},phone = #{phone}
where username = #{username}
</update>
<!--根据id查询,返回一个User-->
<select id="queryUserByUserName" resultType="user">
select * from ssmbuild.user
where username = #{username}
</select>
<!--查询全部User-->
<select id="queryAllUser" resultType="user">
SELECT * from ssmbuild.user
</select>
</mapper>
package service;
import pojo.user;
import java.util.List;
public interface userService {
//增加一个User
int addUser(user user);
//根据id删除一个User
int deleteUserByUserName(String userName);
//更新User
int updateUser(user user);
//根据id查询,返回一个User
Boolean queryUserByUserName(String userName);
//查询全部User,返回list集合
List<user> queryAllUser();
user login(String userName,int password);
}
userservice的实现类
package service;
import dao.userMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import pojo.user;
import java.util.List;
@Service("userService")
public class userServiceIml implements userService {
//调用dao层的操作,设置一个set接口,方便Spring管理
private dao.userMapper userMapper;
@Autowired
public void setUserMapper(userMapper userMapper) {
this.userMapper = userMapper;
}
public int addUser(user user) {
return userMapper.addUser(user);
}
public int deleteUserByUserName(String userName) {
return userMapper.deleteUserByUserName(userName);
}
public int updateUser(user users) {
return userMapper.updateUser(users);
}
public Boolean queryUserByUserName(String username) {
if(userMapper.queryUserByUserName(username)!=null){
return true;
}else{
return false;
}
}
public List<user> queryAllUser() {
return userMapper.queryAllUser();
}
public user login(String userName, int password) {
if(userMapper.queryUserByUserName(userName)!=null){
if(password==userMapper.queryUserByUserName(userName).getPassword()){
return userMapper.queryUserByUserName(userName);
}
}
return null;
}
}
4.Spring层编写
spring整合dao层
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd">
<!-- 配置整合mybatis -->
<!-- 1.关联数据库文件 -->
<context:property-placeholder location="classpath:database.properties"/>
<!-- 2.数据库连接池 -->
<!--数据库连接池
dbcp 半自动化操作 不能自动连接
c3p0 自动化操作(自动的加载配置文件 并且设置到对象里面)
-->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<!-- 配置连接池属性 -->
<property name="driverClass" value="${jdbc.driver}"/>
<property name="jdbcUrl" value="${jdbc.url}"/>
<property name="user" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
<!-- c3p0连接池的私有属性 -->
<property name="maxPoolSize" value="30"/>
<property name="minPoolSize" value="10"/>
<!-- 关闭连接后不自动commit -->
<property name="autoCommitOnClose" value="false"/>
<!-- 获取连接超时时间 -->
<property name="checkoutTimeout" value="10000"/>
<!-- 当获取连接失败重试次数 -->
<property name="acquireRetryAttempts" value="2"/>
</bean>
<!-- 3.配置SqlSessionFactory对象 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 注入数据库连接池 -->
<property name="dataSource" ref="dataSource"/>
<!-- 配置MyBaties全局配置文件:mybatis-config.xml -->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
</bean>
<!-- 4.配置扫描Dao接口包,动态实现Dao接口注入到spring容器中 -->
<!--解释 :;
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 注入sqlSessionFactory -->
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
<!-- 给出需要扫描Dao接口包 -->
<property name="basePackage" value="dao"/>
</bean>
</beans>
spring整合service
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!-- 扫描service相关的bean -->
<context:component-scan base-package="service" />
<!-- 配置事务管理器 -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!-- 注入数据库连接池 -->
<property name="dataSource" ref="dataSource" />
</bean>
</beans>
5.SpringMVC层编写
整合spring-mvc
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!-- 配置SpringMVC -->
<!-- 1.开启SpringMVC注解驱动 -->
<mvc:annotation-driven />
<!-- 2.静态资源默认servlet配置-->
<mvc:default-servlet-handler/>
<!-- 3.配置jsp 显示ViewResolver视图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
</bean>
<!-- 4.扫描web相关的bean -->
<context:component-scan base-package="controller" />
</beans>
6.Spring配置整合文件,applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd">
<import resource="spring/spring-dao.xml"/>
<import resource="spring/spring-service.xml"/>
<import resource="spring/spring-mvc.xml"/>
</beans>
7.controller层的编写
package controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import pojo.user;
import service.userService;
import java.util.List;
@Controller
@RequestMapping("/user")
@ResponseBody
public class userController {
@Autowired
private userService userService;
@RequestMapping("/allUser")
public List allUser() {
List<user> list = userService.queryAllUser();
return list;
}
@RequestMapping("/addUser")
public Boolean addUser(user user) {
userService.addUser(user);
return true;
}
//Restful风格
@RequestMapping("/del/{userName}")
public Boolean deleteUser(@PathVariable("userName") String userName) {
userService.deleteUserByUserName(userName);
return true;
}
@RequestMapping("/updateUser")
public Boolean updateUser(user user) {
userService.updateUser(user);
return true;
}
@RequestMapping("/findUserName/{userName}")
public Boolean findUserName(@PathVariable("userName") String userName){
Boolean res = userService.queryUserByUserName(userName);
return res;
}
@RequestMapping("/login/{userName}/{password}")
public user login(@PathVariable("userName") String userName,@PathVariable("password") int password){
user res=userService.login(userName,password);
return res;
}
}
8.*添加web框架支持
此处需要注意,需要将maven的包手动导入,才能将项目跑起来。
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--DispatcherServlet-->
<servlet>
<servlet-name>DispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>DispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--encodingFilter-->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>
org.springframework.web.filter.CharacterEncodingFilter
</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--Session过期时间-->
<session-config>
<session-timeout>15</session-timeout>
</session-config>
</web-app>