使用Vue和SSM做用户模块功能 - 显示全部 / 回显 / 编辑

最新推荐文章于 2024-03-09 22:53:28 发布

dawn2134

最新推荐文章于 2024-03-09 22:53:28 发布

阅读量1.3k

点赞数 1

分类专栏：框架前端文章标签： Vue SSM

本文链接：https://blog.csdn.net/dawn2134/article/details/91888286

版权

框架同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

1. 功能概述

本篇完成以下功能 :

打开网页 , 查询到所有用户 , 如图1
点击编辑 , 显示该用户的信息 , 如图2
点击修改 , 保存修改信息 , 在图1中显示已修改的信息

图1:

图2:
在这里插入图片描述

2. 功能1 : 显示所有用户信息

2.1 流程

打开页面 ----> 发送ajax请求 -----> 通过SSM查询数据------>返回List结果 ----->在页面上循环显示查询结果

2.2 页面代码

2.2.1 引入js文件

<script src="./js/vuejs-2.5.16.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script src="./js/user.js"></script>

由于后文要用到ajax请求, 所以引入了axios.js文件
而js/user.js文件是写我们功能代码的文件 , 把这部分功能抽取出来 , 方便维护

2.2.2 user.js代码

var app = new Vue({
    el: "#app",
    data: {
    	/*定义变量list, 集合用[], 对象用{}*/
        list: [] 
    },
    methods: {
    	/*这个函数表示发送ajax请求到后端,then里是成功拿到数据后进行的操作*/
        findAll: function () {
            axios.get("/user/findAll").then(
                function (response) {
                	/*这里是首行的变量名app*/
                    app.list = response.data;
                }
            )
        }
    },
	/*这个钩子函数表示 , 页面一加载完成就调用findAll函数 , 注意这里用this!*/
    created: function () {
        this.findAll();
    }
});

2.3 SSM代码

2.3.1 搭建工程

需要准备的内容如下 :

导入依赖 pom.xml
controller层类
service层的接口和实现类
dao层接口
web.xml
spring.xml
springmvc.xml

2.3.2 controller层代码

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }

2.3.3 其它层 / 配置文件代码

其它层和配置文件的代码放在最后.

2.4 将结果显示页面上

<tr v-for="u in list">
    <td><input name="ids" type="checkbox"></td>
    <td>{{u.id}}</td>
    <td>{{u.username}}
    </td>
    <td>{{u.password}}</td>
    <td>{{u.sex}}</td>
    <td>{{u.age}}</td>
    <td class="text-center">{{u.email}}</td>
    <td class="text-center">

3. 功能2 : 点击编辑回显数据

2.1 流程

点击编辑 ----> 发送ajax请求 (带id) -----> 通过SSM查询数据------>返回User结果 ----->在页面上显示查询结果

2.2 页面代码

为 [编辑] 按钮绑定事件

<button type="button" class="btn bg-olive btn-xs" data-toggle="modal"
        data-target="#myModal" @click="findById(u.id)">编辑
</button>

2.2.1 user.js代码

在data中增加user:{}
在methods中增加findById函数 , 注意这里用的是get请求, 并且传了参数id

var app = new Vue({
    el: "#app",
    data: {
        user: {},
        list: []
    },
    methods: {
        findAll: function () {
            axios.get("/user/findAll").then(
                function (response) {
                    app.list = response.data;
                }
            )
        },
        findById: function (id) {
            axios.get("/user/findById?id=" + id).then(
                function (response) {
                    app.user = response.data;
                }
            )
	},
    created: function () {
        this.findAll();
    }
});

3.2 SSM代码

3.2.1 controller层代码

在上文的controller的类中增加方法findById

    @RequestMapping("/findById")
    public User findById(Integer id){
        return userService.findById(id);
    }

3.2.2 其它层 / 配置文件代码

其它层和配置文件的代码放在最后.

3.3 将结果显示页面上

在对应的输入框, 增加 v-model="user.xxxx" 来显示信息

<div class="form-group">
    <label class="col-sm-2 control-label">用户名:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control"
               v-model="user.username">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control"
               v-model="user.password">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">性别:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control"
               v-model="user.sex">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">年龄:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control"
               v-model="user.age">
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">邮箱:</label>
    <div class="col-sm-5">
        <input type="text" class="form-control"
               v-model="user.email">
    </div>
</div>

4. 功能3 : 修改数据

4.1 流程

修改表单内容----> 点击修改 ----> 发送ajax请求 (带user) -----> 通过SSM修改数据------>返回int结果 -----> 当int结果>0时表示修改成功 , 调用findAll函数 , 重新查询首页数据

4.2 页面代码

为 [修改] 按钮绑定事件

<button type="button" class="btn btn-outline" data-dismiss="modal"
        @click="update()">修改
</button>

4.2.1 user.js代码

在methods中增加update函数 , 注意这里用的是post请求, 参数要放在括号里!!!

var app = new Vue({
    el: "#app",
    data: {
        user: {},
        list: []
    },
    methods: {
        findAll: function () {
            axios.get("/user/findAll").then(
                function (response) {
                    app.list = response.data;
                }
            )
        },
        findById: function (id) {
            axios.get("/user/findById?id=" + id).then(
                function (response) {
                    app.user = response.data;
                }
            )
        },
        update: function () {
            axios.post('/user/update',this.user).then(
                function (response) {
                    if (response.data > 0) {
                        this.findAll()
                    }
                }
            )
        }
    },
    created: function () {
        this.findAll();
    }
});

4.2 SSM代码

4.2.1 controller层代码

在上文的controller的类中增加方法update 参数是json , 要加@RequestBody注解

    @RequestMapping("/update")
    public int update(@RequestBody User user){
        return userService.update(user);
    }

4.2.2 其它层 / 配置文件代码

其它层和配置文件的代码放在最后.

5. 其他层和配置文件完整代码

5.1 controller层

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }

    @RequestMapping("/findById")
    public User findById(Integer id){
        return userService.findById(id);
    }

    @RequestMapping("/update")
    public int update(@RequestBody User user){
        return userService.update(user);
    }
}

5.2 service层

接口 :

public interface UserService {

    List<User> findAll();
    User findById(Integer id);
    int update(User user);
}

实现类 :

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDao userDao;

    @Override
    public List<User> findAll(){
        return userDao.findAll();
    }

    @Override
    public User findById(Integer id) {
        return userDao.findById(id);
    }

    @Override
    public int update(User user) {
        return userDao.update(user);
    }
}

5.3 dao层

public interface UserDao {

    @Select("select * from user")
    List<User> findAll();

    @Select("select * from user where id=#{id}")
    User findById(Integer id);

    @Update("update user set username=#{username},password=#{password},sex=#{sex},age=#{age},email=#{email} where id=#{id}")
    int update(User user);
}

5.4 model

略 , 注意表中字段名称与实体类的属性名字相同.

5.5 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">
    <!--设置开始页面-->
    <welcome-file-list>
        <welcome-file>jsp/login.jsp</welcome-file>
    </welcome-file-list>

    <!--前端控制器-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
    <!--编码过滤器-->
    <filter>
        <filter-name>CharacterEncodingFilter</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>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--加载spring配置文件-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring.xml</param-value>
    </context-param>

    <!--监听器-->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
</web-app>

5.6 spring.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"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">

    <!--引入jdbc.properties-->
    <context:property-placeholder location="classpath:jdbc.properties"/>

    <!--数据源-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

    <!--工厂-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!--dao接口扫描包-->
    <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.itheima.dao"/>
    </bean>

    <!--service包扫描-->
    <context:component-scan base-package="com.itheima.service"/>

    <!--事务管理器-->
    <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <tx:advice id="txAdvice" transaction-manager="txManager">
        <tx:attributes>
            <tx:method name="find*" read-only="true"></tx:method>
            <tx:method name="select*" read-only="true"></tx:method>
            <tx:method name="save*" read-only="false" propagation="REQUIRED"></tx:method>
            <tx:method name="delete*" read-only="false" propagation="REQUIRED"></tx:method>
            <tx:method name="update*" read-only="false" propagation="REQUIRED"></tx:method>
            <tx:method name="insert*" read-only="false" propagation="REQUIRED"></tx:method>
        </tx:attributes>
    </tx:advice>

    <aop:config>
        <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.itheima.service.impl.*.*(..))"></aop:advisor>
    </aop:config>
</beans>

5.7 springmvc.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"
       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 http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--开启包扫描-->
    <context:component-scan base-package="com.itheima.controller"></context:component-scan>
    
	<!--注解驱动-->
   <mvc:annotation-driven></mvc:annotation-driven>

    <!--放行静态资源  表示 在webapp下所有的静态资源 都放行-->
    <mvc:default-servlet-handler/>
    
    <!--导入spring配置文件-->
    <import resource="spring.xml"></import>
</beans>

5.8 jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/itcastvue
jdbc.username=root
jdbc.password=root

5.9 pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.itheima</groupId>
  <artifactId>ssm-vue</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>ssm-vue Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <spring.version>5.0.2.RELEASE</spring.version>
    <slf4j.version>1.6.6</slf4j.version>
    <log4j.version>1.2.12</log4j.version>
    <mysql.version>5.1.6</mysql.version>
    <mybatis.version>3.4.5</mybatis.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>${mysql.version}</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!-- log start -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>${log4j.version}</version>
    </dependency>

    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>${slf4j.version}</version>
    </dependency>

    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>${slf4j.version}</version>
    </dependency>
    <!-- log end -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.0</version>
    </dependency>

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.0.14</version>
    </dependency>

    <!--jackson -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.0</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>itheima-ssm-vue63</finalName>

    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <configuration>
          <path>/</path>
          <port>8080</port>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

dawn2134

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
使用Vue和SSM做用户模块功能 - 显示全部 / 回显 / 编辑

文章目录1. 功能概述2. 功能1 : 显示所有用户信息2.1 流程2.2 页面代码2.2.1 引入js文件2.2.2 user.js代码2.3 SSM代码2.3.1 搭建工程2.3.2 controller层代码2.3.3 其它层 / 配置文件代码2.4 将结果显示页面上3. 功能2 : 点击编辑回显数据2.1 流程2.2 页面代码2.2.1 user.js代码3.2 SSM代码3.2.1 co...
复制链接

扫一扫