关于SPring基础和Vue的学习

@RestController和普通的@Controller的区别

普通的@Controller需要@RespondBody来给前端返回对象

传统的MVC设计模型：Model View Controller

servlet的生命周期

1.init() 用来new一个servlet

2.service()

3.distroy()

servlet容器：Tomcat

Http协议：获取请求和作出相应

HttpServletRequest：Http协议里面的请求

HttpServletResponse：Http协议里面的响应

request和response两个对象是前端发送http协议的时候创建的，给前端返回http协议的时候摧毁的

Controller的核心类是DispatchServlet（Tomcat只存储这一个类）

通过url对应相应的Controller，它们存储在Spring容器中

Vue里的element表达式

组件 | Element<==这里查询组件信息

在图书借阅明细信息中添加用户搜索框dialog

首先加入focus实现点击输入框就弹出dialog

javascript 复制代码

<el-form-item label="借阅人" prop="borrowUser">
          <el-input placeholder="请输入借阅人" @focus="udShow"/>
          <el-input type="hidden" v-model="form.borrowUser"></el-input>
        </el-form-item>

让输入框显示借阅人名字，但实际要加入表单的是借阅人id，所以后面加一个隐藏的input，type为hidden，来获取选择借阅人的id传入表单

udShow的实现（暂时只弹出dialog和列出user表）

javascript 复制代码

udShow(){
      this.udopen=true
      this.getUserList();
    },

getUserList()实现

javascript 复制代码

getUserList(){
      listUser().then(response =>{
        this.userList = response.rows
        this.total = response.total
      })
    }

实现显示用户信息

html 复制代码

 <el-dialog width="850px" :visible.sync="udopen" :title="udtitle">
      <el-form>

      </el-form>
      <el-table v-loading="loading" :data="userList" @selection-change="handleUserSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" />
        <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"  width="120" />
        <el-table-column label="状态" align="center" key="status" >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" ></el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

dialog里的visible属性为true则打开页面，设置为false则为关闭页面

定义udopen的初始值

javascript 复制代码

  data(){
    return{
      ...   
      //是否弹出用户选择图层
      udopen: false,
      //选择用户的标题
      udtitle:"选择用户",
      ...

多选框函数的实现"handleUserSelectionChange"

javascript 复制代码

handleUserSelectionChange(selection) {
      this.ids = selection.map(item => item.userId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

将传入的 selection 数组通过 map 方法转换为一个仅包含 userId 的新数组，并赋值给 this.ids。假设 selection 是用户选中项的集合，此操作提取所有选中项的 userId 字段

当selection的长度不是1的话给single赋值为true--单选的话single为false

若长度为0则给multiple设置为true--啥也没选就返回true

----实现结果截图