尚硅谷前端（wsy答辩）

文章目录

尚硅谷前端（wsy答辩）
一、前端开发过程和框架
- 1.框架目录结构认识
- - 1.程序的入口有两个第一个是index,html , 第二个在SRC目录下的main,js
  - 2.前端页面环境使用框架（模板）
  - 3、框架build目录
  - 4. config目录
  - 4.src目录
  - 5.启动项目
二、讲师列表
- 1.讲师列表的前端体现
- - 第一步：添加路由 src router index,js
  - 第二步，添加页面
  - 第三步。定义接口
  - 第四步在讲师列表页面list,vue页面调用。得到接口返回的数据。
  - 第五步页面显示
三.讲师分页与查询
- 分页
- 条件查询
- - 选择中的清空功能
列表删除（明天看完再写）

一、前端开发过程和框架

1.框架目录结构认识

在这里插入图片描述

1.程序的入口有两个第一个是index,html , 第二个在SRC目录下的main,js

在这里插入图片描述
main.js 都是引入其它的包

import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import '@/icons' // icon
import '@/permission' // permission control
import { hasBtnPermission } from './utils/permission' // button permission

然后创建了个vue对象（vue是一个用于构建用户界面的开源JavaScript框架。）

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

2.前端页面环境使用框架（模板）

模板一vue-admin-template。模板二 vue +element-ui

3、框架build目录

放项目构建的脚步文件，基本不用改

4. config目录

index,js
一些配置，比如

/ Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

host: ‘localhost’, ip地址 port 端口号等等
注意useEslint: 这项改成false,
scodeHNEslunt门自动整理代码格式，但是它太严格了，影响我们编码，所以把它给干了

dev.env.js。 BASE_API:是修改后端接口的地址

  // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  BASE_API: '"http://localhost:8222"',

4.src目录

在这里插入图片描述
api 定义方法
assets 静态资源，比如jss文件，css文件等
components 放一些插件和组件
icons 项目中相关的图标
router 路由
store 没啥用放些脚本
styles 放一些样式
views 项目中具体的页面

5.启动项目

1.下载依赖

npm install

2 启动项目

npm run dev

二、讲师列表

1.讲师列表的前端体现

第一步：添加路由 src router index,js

{
  path: '/teacher',
  component: Layout,
  // 访问/teacher时自动跳转到/teacher/table 。就是默认的跳转
  redirect: '/teacher/table',
  // 路由名称,简单理解就是那个按钮的名称
  name: '讲师管理',
  // 路由的标题 图标
  meta: { title: '讲师管理', icon: 'example' },
  // 子路由配置
  children: [
    {
      // 子路由也就是下级菜单的路径
      path: 'table',
      // 子路由名称
      name: '讲师列表',
      // 子路由组件
      component: () => import('@/views/edu/teacher/list'),                 （）@/默认的不能改，路径可以自己定义）
      // 子路由元信息
      meta: { title: '讲师列表', icon: 'table' }
    },
    {
    path: 'from',（就是添加的路径放在哪里）
    name: '添加讲师',
  
      component: () => import('@/views/edu/teacher/form'),
      
      meta: { title: '添加讲师', icon: 'tree' }
    },
    {

      path: 'edit/:id',
  
      name: 'EduTeacherEdit',
   component: () => import('@/views/edu/teacher/form'),
      meta: { title: '编辑讲师', noCache: true },
      hidden: true
    }
  ]
},

然后在对应路径下添加页面比如 component: () => import(‘@/views/edu/teacher/list’ 你就要在对应目录里写list.vue

如果路径写错会报错，看看路径写错没比如/views/teacher/form 因为路径错了，view下没有teacher这个文件夹，所以会报错，检查路径改为/views/edu/teacher/form即可

第二步，添加页面

比如在teacher 中添加list

<template>
<div class="app-container">
</div>
</template>

这些是必须的，其它内容在中间填写。如

<template>
<div class="app-container">
讲师添加
</div>
</template>

第三步。定义接口

第三步在api文件夹创建teacher.js定义访问的接口地址

import request from '@/utils/request'

import axios from 'axios'
import {Message, MessageBox} from 'element-ui'
import store from '../store'
import {getToken} from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 20000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改

说白了就是这个事定义的一些规则，比如多久超时还有哪些token直接拦截到等等，按具体的情况自己定义

继续说teacher.request

export default {
  // 1. 讲师列表
  getTeacherListPage(page,limit,queryTeacher){
    return request({
      // 用模板字符串进行动态拼接页码和每页显示的记录数
      url: `/edu/edu-teacher/findPage/${page}/${limit}`,
      method: 'post', //请求方法为POST
      // data表示把对象转换成json进行传递到接口里面

      data: queryTeacher
    })
  },

page, limit, queryTeacher 分别是三个参数 page 当前页，limit 每页记录数。queryTeacher 是条件的对象 ,这个结构是固定的，建议直接复制，不要手敲。

第四步在讲师列表页面list,vue页面调用。得到接口返回的数据。

<template>
<div class="app-container">
讲师列表
</div>
</template>
<script>
export default{
}
//写核心代码位置
</script>

因为模板已经封装好了，所以只要写参数就行，参数大概就如下

</template>
<script>
import teacher from '@/api/edu/teacher/teacher'
export default {
    // data:{
    //
    // },
    data() {
      return {
        list: null, // 存储教师列表
      page: 1, // 当前页码
      limit: 5, // 每页显示的记录数
      total: 0, // 总记录数
      queryTeacher: {} // 查询条件
      }
    },
    created() {
      this.getList()#讲师列表的方法
    },
 methods: {
    getList(page = 1) {
      // 更新当前页码
      this.page = page
      // 调用API获取教师分页列表
      teacher.getTeacherListPage(this.page, this.limit, this.queryTeacher)
        .then(response => {
          // 更新列表和总记录数
          this.list = response.data.rows
          this.total = response.data.total
        })
        .catch(error => {
          // 处理错误
          console.log(error)
        })
    },
    resetData() {
      // 清空查询条件并重新加载列表
      this.queryTeacher = {}
      this.getList()
    },
      deleteTeacherById(id) {
        // alert(id) 测试代码
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return teacher.removeById(id)
        }).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })

      }
    }
  }

第五步页面显示

使用组件element-ui实现，不用自己写直接用官网的文档修改即可
https://element.eleme.cn
组件—》table表格
在这里插入图片描述
选个样式，点开，有个显示代码

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

每行代码意义如下
<template>
  <!-- 定义一个表格组件 -->
  <el-table
    :data="tableData"  <!-- 绑定表格数据源 -->
    stripe  <!-- 开启斑马纹效果 -->
    style="width: 100%">  <!-- 设置表格宽度为100% -->
    <!-- 定义日期列 -->
    <el-table-column
      prop="date"  <!-- 指定该列的数据字段名 -->
      label="日期"  <!-- 列标题 -->
      width="180">  <!-- 列宽 -->
    </el-table-column>
    <!-- 定义姓名列 -->
    <el-table-column
      prop="name"  <!-- 指定该列的数据字段名 -->
      label="姓名"  <!-- 列标题 -->
      width="180">  <!-- 列宽 -->
    </el-table-column>
    <!-- 定义地址列 -->
    <el-table-column
      prop="address"  <!-- 指定该列的数据字段名 -->
      label="地址">  <!-- 列标题 -->
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        // 表格数据
        tableData: [
          {  // 第一行数据
            date: '2016-05-02',  // 日期
            name: '王小虎',  // 姓名
            address: '上海市普陀区金沙江路 1518 弄'  // 地址
          },
          {  // 第二行数据
            date: '2016-05-04',  // 日期
            name: '王小虎',  // 姓名
            address: '上海市普陀区金沙江路 1517 弄'  // 地址
          },
          {  // 第三行数据
            date: '2016-05-01',  // 日期
            name: '王小虎',  // 姓名
            address: '上海市普陀区金沙江路 1519 弄'  // 地址
          },
          {  // 第四行数据
            date: '2016-05-03',  // 日期
            name: '王小虎',  // 姓名
            address: '上海市普陀区金沙江路 1516 弄'  // 地址
          }
        ]
      }
    }
  }
</script>

三.讲师分页与查询

分页

在上面个什么UI里找到pagination分页选项进去，选一个
在这里插入图片描述

<el-pagination
  :page-size="20"  //每页显示的条目数 
  :pager-count="11"  //显示的页码数
  layout="prev, pager, next"  //分页器的布局
  :total="1000">  //总条目
</el-pagination>

直接改就可以了，这段代码加到分页那里，然后进行修改

修改之后加入这段代码，把gitlist方法给传过来

@current-change="getList"

条件查询

就是加这么个东西，还是使用element ui来改，选from表单那
在这里插入图片描述
根据这个修改

每一个el-form-item 都是表单的项。审批人是个普通的input，活动区域是个下拉列表那种筛选，你要几个表单就写几个el-form-item就可以了。v-model绑定到formInline，也就是说一个地方变其它地方都变，这是啥意思呢，就类似选重庆就会下拉九龙坡，沙坪坝，长寿等，选湖南就会下拉长沙等的意思、

inline="true"使表单项水平排列，:model绑定表单数据对象 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">   //inline="true"使表单项水平排列
  <!-- 表单项，label属性设置标签文本，el-input组件绑定到formInline对象的user属性 -->
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <!-- 表单项，label属性设置标签文本，el-select组件用于选择，v-model绑定到formInline对象的region属性 -->
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <!-- el-option是el-select的下拉选项，label是显示的文本，value是绑定到v-model的值 -->
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <!-- 表单项，不包含标签，只包含一个el-button组件，type="primary"设置按钮为主要样式，@click绑定提交表单的方法 -->
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
<script>
  // Vue组件的默认导出对象
  export default {
    // 组件的数据对象
    data() {
      return {
        // 表单数据对象，包含用户输入的数据
        formInline: {
          // 审批人输入框的绑定值
          user: '',
          // 活动区域选择框的绑定值
          region: ''
        }
      }
    },
    // 组件的方法对象
    methods: {
      // 提交表单的方法，当点击查询按钮时触发
      onSubmit() {
        // 在控制台输出'submit!'，实际应用中可以在这里处理表单提交逻辑
        console.log('submit!');
      }
    }
  }
</script>

选择中的清空功能

清空条件值，清空所有查询

resetData（）{//引用清空的方法
//表单输入项数据清空，
this.teacherQuery={}
//查询所有讲师数据
this.getList()

因为是双向绑定，一个被清了，绑定的另外一个也被干了。