Complete project learning-3

Keywords: Vue SSM

1. Use sub query to realize the menu list on the left

1.1 edit mapping file

1.1.1 Sql statement writing method of subquery

	/*Query level-1 menu information*/
SELECT * FROM rights WHERE parent_id = 0
/* Query from table data */
SELECT * FROM rights WHERE parent_id = 3

1.1.2 writing method of XML Mapping File

	 <!--Data acquisition by sub query
        1.Query main table information
    <select id="getRightsList" resultMap="rightsRM">
        select * from rights where parent_id = 0
    <resultMap id="rightsRM" type="Rights" autoMapping="true">
        <!--Primary key information-->
        <id property="id" column="id"></id>
        <collection property="children" ofType="Rights"
                    select="findChildren" column="id"/>
    <select id="findChildren" resultType="Rights">
        select * from rights where parent_id = #{id}

2. User module management

2.1 paging query supplement

2.1.1 user requirements description

Note: the user's text input box may have value or no data. Then dynamic Sql should be used to query the data in the back-end server

2.1.2 editing UserController

     * Business description:
     *  1. /user/list
     *  2.Request type: GET
     *  3.Parameter receiving: received by PageResult object in the background
     *  3.Return value: sysresult < pageresult >
     public SysResult getUserList(PageResult pageResult){//Parameter 3
         //Total number of business queries. Number of pages
         pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult);//5 parameters

2.1.3 editing UserService

    public PageResult getUserList(PageResult pageResult) {
        //1. total records
        long total = userMapper.getTotal();
        //2. Paged data
        //2.1 get the number of entries per page
        int size = pageResult.getPageSize();
        //2.2 obtaining the starting position
        int start = (pageResult.getPageNum() - 1) * size;
        //2.3 obtaining data queried by users
        String query = pageResult.getQuery();
        List<User> rows = userMapper.findUserListByPage(start,size,query);
        return pageResult.setTotal(total).setRows(rows);

2.1.4 editing UserMapper

  1. Edit Mapper interface
List<User> findUserListByPage(@Param("start") int start,
                                  @Param("size") int size,
                                  @Param("query") String query);
  1. Edit the UserMapper.xml mapping file
<mapper namespace="com.jt.mapper.UserMapper">
        resultType: Suitable for single table query
        resultMap:  1.Multi table Association query 2.Used when the field name and attribute are inconsistent
        if Judgment conditions
               test="query !=null and query !='' Indicates that the condition is true if it is not met at the same time
    <select id="findUserListByPage" resultType="User">
        select * from user
                <if test="query !=null and query !='' ">username like "%"#{query}"%"</if>
        limit #{start},#{size}

2.2 completion status modification

2.2.1 business description

Note: the status=true/false in the database is controlled by the switch. The object mapping of 1 / 0 and true/false in the database can be transformed into each other
Modify the status according to the user's ID

2.2.2 front end JS analysis

  1. Knowledge points
    Scope slot: generally, the current row object can be dynamically obtained during table data presentation
    2. emplate
    3. Slot scope attribute = "variable"
  2. Page JS analysis
 		   <el-table-column prop="status" label="state">
              <!-- <template slot-scope="scope">
              </template> -->
             <template slot-scope="scope">
                <el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
                  active-color="#13ce66" inactive-color="#ff4949">
  1. Page function description
	async updateStatus(user){
         //To implement user state modification, pay attention to the new usage ${key} proposed in template string ES6
        //const {data: result} = await this.$http.put('/user/status/''/'+user.status)
        const {data: result} = await this.$http.put(`/user/status/${}/${user.status}`)
        if(result.status !== 200) return this.$message.error("User status modification failed!")
        this.$message.success("User status modified successfully!")

2.2.3 business interface document description

  • Request path / user/status/{id}/{status}
  • Request type PUT
  • Request parameters: user ID / status value data
Parameter nameParameter typeParameter descriptionRemark information
idIntegerUser ID numberCannot be null
statusbooleanParameter status informationCannot be null
  • Return value result: SysResult object
{"status":200,"msg":"Server call succeeded!","data":null}

2.2.4 editing UserController

     * Business: modify user status
     * Parameter: / user/status/{id}/{status}
     * Return value: SysResult object
     * Type: put type
    public SysResult updateStatus(User user){

        return SysResult.success();

2.2.5 editing UserService

 //Modify the status/updated update time during the update operation
    public void updateStatus(User user) {
        user.setUpdated(new Date());

2.3 adding users

2.3.1 page JS analysis

  1. Edit new page
  2. New page JS analysis

2.3.2 description of new business interface

  • Request path / user/addUser
  • Request type POST
  • Request parameters: the entire form data is encapsulated into js objects for parameter transfer
Parameter nameParameter typeParameter descriptionRemark information
usernameStringuser nameCannot be null
passwordStringpasswordCannot be null
phoneStringTelephone numberCannot be null
emailStringpasswordCannot be null
  • Return value result: SysResult object
{"status":200,"msg":"Server call succeeded!","data":null}

2.3.3 editing UserController

     * Business: add a user
     * url:  /user/addUser   post type
     * Parameters: receive using User object
     * Return value: SysResult object
    public SysResult addUser(@RequestBody User user){

        return SysResult.success();

2.3.4 editing UserService

     * 1.Encrypt password
     * 2.Add status code information
     * 3.Add creation time / modification time
     * 4.xml method for completing receipt operation
     * @param user
    public void addUser(User user) {
        //1. Password encryption
        Date date = new Date();
        String md5Pass = DigestUtils.md5DigestAsHex(user.getPassword().getBytes());
                .setUpdated(date); //It is best to ensure the uniqueness of time

2.3.5 edit UserMapper/xml Mapping File

  1. Edit mapper interface
 	void addUser(User user);
  1. Edit xml Mapping File
 <!--Finish adding user-->
    <insert id="addUser">
        insert into user(id,username,password,phone,email,status,created,updated)

2.4 modify operation data echo

2.4.1 page JS analysis

  1. Button click event
<el-button type="primary" icon="el-icon-edit" size="small" @click="updateUserBtn(scope.row)"></el-button>
  1. Data echo JS
	async updateUserBtn(user){
        this.updateDialogVisible = true
        const {data: result} = await this.$http.get("/user/"
        if(result.status !== 200) return this.$message.error("User query failed")
        this.updateUserModel =

2.4.2 page interface document

  • Request path: / user/{id}
  • Request type: GET
  • Return value: SysResult object
Parameter nameParameter descriptionremarks
statusstatus information 200 indicates that the server request was successful
msgPrompt information returned by the serverCan be null
dataBusiness data returned by the serverReturn user object
  • JSON format is as follows:
 "msg":"Server call succeeded!",

2.4.3 editing UserController

     * Query database by ID
     * URL:/user/{id}
     * Parameter: id
     * Return value: SysResult(user object)
    public SysResult findUserById(@PathVariable Integer id){

        User user = userService.findUserById(id);
        return SysResult.success(user);

2.4.4 editing UserService

    public User findUserById(Integer id) {

        return userMapper.findUserById(id);

2.4.5 editing UserMapper

	//Principle: mybatis has an arbitrary name when passing a single value (int and other basic types / string)
    //     The underlying data obtained by subscript [0] is independent of the name
    @Select("select * from user where id=#{id}")
    User findUserById(Integer id);

2.4.6 page effect display

2.5 realize user update operation

2.5.1 page JS analysis

  1. Page JS
  2. Initiate an Ajax request

2.5.2 modified business interface

  • Request path: / user/updateUser
  • Request type: PUT
  • Request parameters: User object structure
Parameter nameParameter descriptionremarks
IDUser ID numberCannot be null
phonetext messageCannot be null
emaile-mail addressCannot be null
  • Return value: SysResult object
Parameter nameParameter descriptionremarks
statusstatus information 200 indicates that the server request was successful
msgPrompt information returned by the serverCan be null
dataBusiness data returned by the servernull
  • JSON format is as follows:
 "msg":"Server call succeeded!",

2.5.3 editing UserController

     * Business description: enables data modification
     * URL:  /user/updateUser
     * Parameters: user object
     * Return value: SysResult object
     * Request type: PUT
    public SysResult updateUser(@RequestBody User user){

        return SysResult.success();

2.5.4 editing UserService

    public void updateUser(User user) {


2.5.5 editing UserMapper

 @Update("update user set phone=#{phone},email=#{email} where id=#{id}")
    void updateUser(User user);

2.6 user deletion

2.6.1 page JS modification

3. Knowledge string

1.1 relationship between node.js and vue scaffold

  1. Node.js function node.js ® Is a JavaScript runtime environment based on the Chrome V8 engine.
  2. VUE scaffold is a development framework system xxx.vue for front-end development and Simulation of back-end design
  3. VUE.js is an advanced progressive JS framework that encapsulates javascript

1.2 page simple effect

1.2.1 ElementUI component declaration

Because there are many components in elementUI, if you import directly, the JS file will be very large. The best way is to import on demand. Control the size of JS file

1.2.2 import steps

  1. Import components
import {
} from 'element-ui'

  1. External declaration component

Posted by virtualdevl on Tue, 09 Nov 2021 14:56:56 -0800