软件开发基础 第九天实验报告总结

---

前言

初次尝试写 此篇记录5月8日软件开发基础上课学习内容感谢 @okfang616 鼎力支持

1. 嵌套路由

两路由配置的时候，添加嵌套路由，目的，在父级的组件中添加 <router-view>，实现父级组件中引入其他组件配置路由，父级路由中添加children，是一个数组，数组中有多个router。

注意：配置完嵌套路由后，父级路由必须添加一个 <router-view></router-view>，否则导致嵌套路由无法访问

    <div class="main-right">
      <div class="main-right-title">
        <Header :title="focus_title"></Header>
      </div>
      <div class="main-right-content">
        <router-view></router-view>
      </div>
    </div>

再路由配置的时候，添加嵌套路由，目的，在父级的组件中添加,实现父级组件中引入其他组件
配置路由，父级路由中添加chilren,是一个数组，数组中有多个router

{
    path: '/',
        "component":Index,
        name: 'index',
        children:[
        {
            path: '/user',
            component: User,
            name: 'user',
        },
        {
            path: '/student',
            component: Student,
            name: 'student',
        },
        {
            path: '/course',
            component: Course,
            name: 'course',
        },
        {
            path: '/score',
            component: Score,
            name: 'score',
        }
    ]
}

2. vue项目中样式污染的解决方案

2.1 通过在样式中style的作用域

<style scoped>

</style>

2.2 安装Saas 依赖

npm isntall node-sass@"^4.14.1" --save
npm install sass-loader@"^10.2.1" --save

注意：不同版本的依赖可能导致 npm install 执行的问题 要根据自己的环境选择版本

在style中可以直接使用 lang="scss"

<style scoped lang="scss">
    .main_student{
        width: 100%;
        .student_table {
            td {
                border: 1px solid #eee;
                height: 30px;
                line-height: 30px;
            }
        }
    }
</style>

注意：以上是两步不是两种方法

3. ajax库和模拟数据

• AJAX 即 Asynchronous Javascript And XML (异步 JavaScript 和 XML )
• AJAX 不是一门编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术
• AJAX 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容口使用JavaScript 向服务器提出请求，与服务器进行数据交换；
• 浏览器和服务器之间使用异步数据传输 (HTTP 请求)；
• 根据服务器返回的数据修改 DOM 进行局部渲染而不需要重新加载整个页面。
  2）异步请求的两种用法
  异步程序结果是否使用

3. 同步请求（展示新页面） 异步请求（局部刷新）
   图示：
   

3.1 安装 axios

npm install axios@"^0.26.1"

3.2 配置axios

在src的目录下，创建一个axios文件夹，文件夹中创建index.js文件

import axios from "axios";

let api =  axios.create({//创建一个axios的实例
    timeout: 500000, //请求时长
    //属性 统一定义
})
/**
 * 响应的拦截器 返回的响应如果错误，返回错误信息
 */
api.interceptors.response.use(response=>{
    return response;
},(error)=>{
    return error.response;
})

/**
 * 封装一个方法 get
 * @param url 异步请求的地址
 * @returns {Promise<any>}
 */
api.doGet = async (url) => { //async 异步请求
    let {data} = await api.get(url);  //await 同步等待
    return data;
}
/**
 * 请求的方法
 * @param url
 * @returns {Promise<any>}
 */
api.doPost = async (url,param) =>{
    let {data} = await api.post(url,param);  //await 同步等待
    return data;
}

export default api;

3.2 main.js中添加axios的依赖 两种方式

第一种方式

```javascript
import Axios from 'axios'
Vue.prototype.$api = Axios

this.$api

第二种方式

import axios from "axios"
let data = await axios.create({timeout: 500000}).get("/data/course.json");

import Axios from 'axios'
Vue.use(Axios)

注意：发起axios异步请求的时候，如果想要接受返回值，必须前面加一个await 关键字 ，并且方法定义为async!

4. element-ui

· UI 框架特点口提供丰富的组件和功能，满足项目的绝大部分场景
· 有助于快速完成项目的界面效果，节省开发成本
· 使项目有统一的设计风格和视觉效果
· Vue 常用的 Web UI 框架有 Element UI、Ant Design of
· Vue 等常用的移动端UI 框架有 Mint-ui、Vant UI 等

4.1安装element-ui

npm install element-ui@^2.15.16

4.2 引入

在main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//不要忘记写
import locale from 'element-ui/lib/locale/lang/zh-CN';//中文
...
Vue.use(ElementUi,{locale})

4.3编写.vue文件

<template>
  <div class="main_student">
    <span>我是课程中心</span>
    <el-table :data="course_list" v-loading="loading" :header-cell-style="{backgroundColor:'#eee'}" :highlight-current-row="true" style="width: 100%" border height="600px">
      <el-table-column prop="title" label="课程名称" width="180"> </el-table-column>
      <el-table-column align="center" prop="code" label="课程编号" width="180"> </el-table-column>
      <el-table-column align="center" prop="cate_title" label="课程分类"> </el-table-column>
      <el-table-column align="center" :sortable = "true" prop="hours" label="课时"> </el-table-column>
      <el-table-column align="center" label="学分">
        <template slot-scope="scope">
          <span v-if="scope.row.score==4" style="color:red">{{scope.row.score}}</span>
          <span v-else>{{scope.row.score}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <el-button size="mini" @click="showCourseInfo(scope.row)" icon="el-icon-star-on">查看</el-button>
          <el-button size="mini" icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" icon="el-icon-close">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="course_form" :model="course_form" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="课程名称" prop="title" :rules="[{ required: true, message: '请输入课程名称', trigger: 'blur' }]">
          <el-input v-model="course_form.title"></el-input>
        </el-form-item>
        <el-form-item label="课程编号" prop="code" :rules="[{ required: true, message: '请输入课程编号', trigger: 'blur' }]">
          <el-input v-model="course_form.code"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCourse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

具体内容参照：https://element.eleme.cn/#/zh-CN/component/form

总结

基础不牢 地动山摇
学会借鉴 节省时间