房产项目

1. 页面管理

• (1) 封装接口 在api中创建page.js

  import requests from '@/utils/request'
  // 获取页面列表
  export function getPagesList(params) {
    return requests({
      url: '/pages',
      params
    })
  }
  
  // export const getPagesList = (params) => requests({ url: '/pages', params })
  // 获取页面数量
  export const getPagesNum = (params) => requests({ url: '/pages/count', params })
  // 获取指定页面
  export const getPageInfo = (id) => requests({ url: '/pages/' + id })
  // 新建页面
  export const addPagesNum = (data) => requests({ url: '/pages', method: 'post', data })
  // 编辑页面
  export const undatePages = (data) => requests({ url: '/pages/' + data.id, data, method: 'put' })
  // 删除页面
  export const delPages = (id) => requests({ url: '/pages/' + id, method: 'delete' })
  

• (2)在views中创建page文件夹index.vue文件

  先写静态结构 ，实现后进行渲染

               #### 1.1渲染列表 
  

//1.引入接口
import { getPagesList, getPagesNum, delPages, addPagesNum, undatePages, getPageInfo } from '@/api/page'
//2.在data外，methods上面写created钩子函数
async created() {
    // 获取页面列表
    await this.getPagesList()
    // 获取页面数量
    await this.getPagesNum()
  }
//3.在methods中
    // 获取页面列表
    async getPagesList() {
      const res = await getPagesList(this.page)
      this.pagesList = res
      // console.log(1, res)
    },

1.2分页器功能

给分页器功能绑定total（一共几页），pagesize(一页几个数据)，prev-click（前一页），next-click（后一页），current-change（绑定页面跳转函数）

<!-- 分页 -->
 <div class="block" align="middle">
   <el-pagination
     layout="prev, pager, next"
     :total="total"
     :page-size="page._limit"
     @prev-click="prevClick"
     @next-click="nextClick"
     @current-change="currentChangeFn"
   />
 </div>

//1.data里return中写
page: {
     _limit: 5, // 获取多少条
     _start: 0, // 多少条开始
     title_contains: ''// 模糊查询的标题
   },
total: 0, // 多少条数据
currentPage: 1, // 当前页
 
//2.在methods中
// 上一页
 prevClick() {
   this.page._start -= 5
   this.getPagesList()
 },
 // 下一页
 nextClick() {
   this.page._start += 5
   this.getPagesList()
 },
 // 获取页面数量
 async getPagesNum() {
   const res = await getPagesNum({ title_contains: this.page.title_contains })
   this.total = res
   // console.log(2, res)
 },
 // 点击页码跳转
 currentChangeFn(newpage) {
   // console.log(3, newpage)
   this.page._start = (newpage - 1) * this.page._limit
   this.getPagesList()
 },

1.3添加编辑页面

1.给添加页面绑定点击事件@click="addFn"

2.给el-dialog添加显示隐藏:visible="isShowDialog" ，在data里的return默认isShowDialog: false 。绑定@close="cancelFn"关闭页面。绑定title根据pageForm里是否有id判断是编辑还是新增。

3.给el-form绑定ref属性，双向绑定v-model，设置表单校验:rules="rules

4.标题添加prop属性，input框双向绑定

<el-col>
        <el-button
          type="primary"
          @click="addFn"
        >添加页面</el-button>

        <el-dialog
          :title="pageForm.id?'编辑页面':'添加页面'"
          :visible="isShowDialog"
          @close="cancelFn"
        >
    <el-form ref="pageForm" :model="pageForm" label-width="120px" :rules="rules">
       <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
       <el-input v-model="pageForm.title" placeholder="请输入标题" />
        </el-form-item>
           
<!-- <el-form-item label="内容" :label-width="formLabelWidth" /> -->

//1. 在methods里写
  //添加
    addFn() {
      this.isShowDialog = true //弹框显示
    },
  // 取消关闭弹窗
    cancelFn() {
      this.isShowDialog = false
      this.$refs.vueEditor.editor.root.innerHTML = ''
      this.pageForm = {
        title: '',
        content: ''
      }
    },
//2.在data里return中写表单校验
rules: {
  title: [
  { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
 content: [
 { required: true, message: '内容不能为空', trigger: 'blur' },
 { validator: validatePass, trigger: 'change' }
        ]
      }
//3.在return中
        input: '',
      pagesList: [],
   // 弹出框
      pageForm: {
        title: '',
        content: ''
      },
   formLabelWidth: '120px',
      

*ref与$refs相关知识*

ref: 可以给任意dom或组件附加上ref属性

1 <div ref="refA">hello</div>
2 <ChildrenSubRef ref="refB"/>

$refs:上面定义的一个或多个含有ref属性的dom元素或组件，在当前组件实例化后会将它们写入组件实例的属性$refs,$refs是一个集合，

页面有一个ref就有一个元素在里面，而实际上$refs里的每个ref都指向它的实例 , **访问this.$refs.refA 就可以访问到这个refA所在的dom** , 访问this.$refs.refB 就可以访问到这个refB所在的Vue组件实例

在父组件能拿到子组件的实例，就像在子组件中访问子组件实例一样，那就明白ref能干嘛了. **执行子组件方法：**this.$refs.refB.getSub1()

5.富文本框，文档链接blog.csdn.net/yupyuping/a…

下载、注册、引入、使用、配置

<!-- 富文本框 -->
            <el-form-item label="内容" prop="content">
              <VueEditor ref="vueEditor" :config="config" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelFn">取 消</el-button>
            <el-button type="primary" @click="confirmFn">确 定</el-button>
          </div>
        </el-dialog>

      </el-col>

//1.下载  npm install vue-word-editor --save
//2. 引入 
    import VueEditor from 'vue-word-editor'
    import 'quill/dist/quill.snow.css'
//3.在data上面写注册
components: { VueEditor },
//4.使用
//5.配置  在return中写
  config: {
        // 上传文本的配置
        uploadImage: {
          url: 'http://localhost:9529/upload', // 文章上传到服务器端的处理路径
          name: 'file', // 后台所需要的参数的名称
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert('http://localhost:9529' + res.data.url)// 文件上传之后的回调，接收服务器响应回来的数据，根据服务器的地址进行填充
          }
        }
      },  
//6.富文本校验
var validatePass = (rule, value, callback) => {
      if (value === '<p><br></p >') {
        callback(new Error('请输入内容'))
      }
      if (this.$refs.vueEditor.editor.getLength() === 1) {
        callback(new Error('请输入内容'))
      }
      callback()
    }
//7.给取消按钮绑定cancelFn
//8.给确定按钮绑定confirmFn,method里
  async confirmFn() {
      // 获取富文本的内容
      // this.form.content = this.$refs.vueEditor.editor.root.innerHTML
      try {
        this.pageForm.content = this.$refs.vueEditor.editor.root.innerHTML
        await this.$refs.pageForm.validate()
        if (this.pageForm.id) {
          await undatePages(this.pageForm)
          this.$message.success('编辑成功')
        } else {
          await addPagesNum(this.pageForm)
          this.$message.success('添加成功')
        }
        this.getPagesList()
        this.cancelFn()
      } catch (err) {
        console.log(err)
      }
    }
  

#try/catch的用法#

try语句允许我们定义在执行时进行错误测试的代码块， catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

6.搜索框el-dropdown绑定变量@command="ChangeValue"给输入框赋值历史记录，绑定点击事件判断是否隐藏@click.native="isShowDropdown"。

7.给el-input框双向绑定v-model.trim="title_contains"

v-model的修饰符用法

.lazy 并不是实时改变，而是在失去焦点或者按回车时才会更新

.number 将输入转换成Number类型

.trim 可以自动过滤输入首尾的空格

**补充知识：**vue通过v-model，@input, @v-model.lazy几种输入框数据更新方式的区别

在使用v-model时，如果用中文输入法输入中文，一般在没有选定词组前，也就在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用@input来代替v-model.

而v-model也有修饰符，.lazy会转变为在change事件中同步，这时。message并不是实时改变，而是在失去焦点和按回车时才会更新

  <!-- 右边搜索框和筛选按钮 -->
<el-col class="myInput">
        <el-dropdown disabled="true" placement="bottom-start" trigger="click" @command="ChangeValue" @click.native="isShowDropdown">
          <el-input v-model.trim="title_contains" style="width:600px" type="" size="small" placeholder="请输入关键字" class="input-with-select">
            <el-button slot="append" type="small" @click="editPages">筛选</el-button>
            <el-dropdown-menu v-show="isDropdown" slot="dropdown">
              <el-dropdown-item v-if="myHistory.length===0" disabled>没有历史记录</el-dropdown-item>
              <el-dropdown-item v-for="item,index in myHistory" :key="index" :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-input></el-dropdown>
      </el-col>
    </el-row>
 <!-- 分割线 -->
    <el-divider />