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

分类：菜鸟笔记作者：m0_57715084

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

mvcmvcmybatisspringvue.js

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot