ssm+vue实现前后端分离的登录注册

Familyism

已于 2024-04-23 19:48:10 修改

阅读量2.5k

点赞数 3

文章标签： vue.js mybatis spring mvc

于 2022-08-24 17:35:18 首次发布

本文链接：https://blog.csdn.net/m0_57715084/article/details/126317214

版权

技术栈：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模板：

vue中封装axios的请求方法_Famiglistimo-run的博客-CSDN博客

然后可以开始进行接口对接

后端：

1.数据库设计及建表

create table user(
    username varchar(32)  not null primary key,
	password int  not null,
	phone int  not null
);

2.新建后台项目，基本环境搭建

新建基本框架结构
pojo
dao
service
controller

applicationContext.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容器中 -->
    <!--解释 ：https://www.cnblogs.com/jpfss/p/7799806.html-->
    <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>