工作笔记（6）

标签：vue item 笔记工作 axios 组件 query message

快捷键

替换选中内容:

Ctrl+H

Ctrl+Alt+Enter

退出终端:

Ctrl+C

vue初始化格式:

Vueinit

设置路由: router/index/js

{
    path:"/studentInfo",
    name:"studentInfo",
    component:()=>import("../views/Student/StudentView.vue")
}

布局页:

APP.vue

Emmit语法规则:(html emmet)

e.g.table>tr3>td2

#.+>{}@-*

模板语法:

(property)v-text=”变量名” & {{变量名}}

v-html用法:

<h2 v-html="title"></h2>
//data
title:"<span style='color:red;'>用户信息</span>"

v-if/v-else-if/v-else的使用

成绩评定:(v-if/v-else-if/v-else)

<span v-if="score>=85"style="color:green">优秀</span>
<span v-else-if="score>=75">良好</span>
<span v-else-if="score>=60">及格</span>
<span v-else>不及格</span>

下拉框绑定

<div class="container">
	班级:
    <p class="form-inline">    
        <select class="form-control">        
            <option v-for="iteminstuClass" v-bind:key="item.id" v-bind:value="item.id">
            {{item.name}}
            </option>
        </select>      
        <button class="btn btn-success">查询</button>        
    </p>
</div>

列表显示:

<table class="tabletable-bordered">
    <tbody>
        <tr class="bg-primary">
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>成绩</td>
            <td>家庭住址</td>
        </tr>
        <tr v-for="iteminstuList" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.stuName}}</td>
            <td>{{item.sex|formatSex}}</td>
            <!--|管道符过滤器用-->
            <td>{{item.score}}</td>
            <td>{{item.address}}</td>
        </tr>
    </tbody>
</table>

过滤器

显示为(property)的后接":"

(method)的后接"()"

data()例外

filters:{
    formatSex(value){
    	return value?"男":"女";
	},
}

安装bootstrap axios vue-axios

npm install(i) axios vue-axios bootstrap@3 --save

main.js中数据访问组件导入

import axios from 'axios'
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios,axios)
import "bootstrap/dist/css/bootstrap.css"

main.js中设置基础路径

axios.defaults.baseURL="http://localhost:24395/"

页面跳转:

this.$router.push("/college");

元组:

		/// <summary>
        /// 获取员工
        /// </summary>
        /// <param name="aId"></param>
        /// <param name="cId"></param>
        /// <param name="pId"></param>
        /// <param name="eName"></param>
        /// <param name="pageSize"></param>
        /// <param name="pageIndex"></param>
        /// <returns>员工数据集、总记录数、总页数</returns>
        public (int recordCount, int pageCount, IQueryable<Emp> query) GetEmps(int aId, int cId, int pId, string? eName, int pageSize, int pageIndex)
        {
            try
            {
                var query = db.Emps.Include(x => x.Area).Include(x => x.College).Include(x => x.Position).AsQueryable();
                query = query.Where(x => aId == 0 || x.AId == aId);
                query = query.Where(x => cId == 0 || x.CId == cId);
                query = query.Where(x => pId == 0 || x.PId == pId);
                query = query.Where(x => string.IsNullOrEmpty(eName) || x.EName.Contains(eName));
                int recordCount = query.Count();
                int pageCount = (int)Math.Ceiling(recordCount * 1.0 / pageSize);
                query = query.OrderBy(x=>x.EId).Skip((pageIndex - 1) * pageSize).Take(pageSize);
                return (recordCount,pageCount,query);
            }
            catch (Exception ex)
            {
                logger.LogError("获取员工出错!" + ex.Message);
                throw;
            }
        }

获取地址栏传值

let cId=this.$route.query.cId;

级联关系重复解决方案:Cascade=>NoAction

Migrations:

table.ForeignKey(
            name: "FK_Emp_Area_AId",
            column: x => x.AId,
            principalTable: "Area",
            principalColumn: "AId",
            onDelete: ReferentialAction.NoAction);

解决浏览器编译错误时，取消全屏覆盖（建议关掉） vue.config.js

![img](file:///C:\Users\Asus\AppData\Local\Temp\ksohtml37560\wps1.jpg)

点击链接按钮无反应

①javascript:void(0)

②javascript: ;

vue实例的生命周期

Vue 实例生命周期

组件

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <EmpList>
    	<!--插槽-->
    </EmpList>
    <emp-list></emp-list>
  </div>
</template>
<script>
//引入员工列表组件
import EmpList from "./Emp/EmpView.vue";
export default {
  //注册组件
  components: {
    EmpList,
  },
  data() {
    return {};
  }，
};
</script>

插槽:给组件预留位置

1.匿名插槽（默认插槽）

<slot></slot>

2.具名插槽（命名插槽）

<slot name=""></slot>

3.作用域插槽（格式化代码块）

<!--给匿名插槽设置自定义属性 v-bind:自定义属性="响应对象名" -->
<slot :empList="empList">  
	<table class="table table-bordered">
    <thead>
      <tr class="bg-primary">
        <td>校区</td>
        <td>学院</td>
        <td>姓名</td>
        <td>性别</td>
        <td>职位</td>
        <td>身份证号码</td>
        <td>电话</td>
        <td>薪资</td>
        <td>爱好</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in empList" :key="item.EId">
        <td>{{ item.Area.AName }}</td>
        <td>{{ item.College.CName }}</td>
        <td>{{ item.EName }}</td>
        <td>{{ item.Gender | getGenderString(item.Gender) }}</td>
        <td>{{ item.Position.PName }}</td>
        <td>{{ item.IdCard }}</td>
        <td>{{ item.Tel }}</td>
        <td>{{ item.Salary | getSalaryString(item.Salary) }}</td>
        <td>{{ item.Hobby }}</td>
        <td>
          <a href="javascript:void(0)" @click="upd(item.EId)">修改</a>&nbsp;
          <a href="javascript:void(0)" @click="del(item.EId)">删除</a>&nbsp;
        </td>
      </tr>
    </tbody>
	</table>
</slot>

<EmpList>
    <!--<div v-slot="scope">-->
	<div slot-scope="scope">
        <table class="table table-bordered">
          <thead>
            <tr class="bg-primary">
              <td>姓名</td>
              <td>性别</td>
              <td>电话</td>
              <td>薪资</td>
            </tr>
          </thead>
          <tbody>
              <!--scope中的empList empList为子组件插槽绑定的属性名(v-bind:自定义属性) -->
            <tr v-for="item in scope.empList" :key="item.EId">
              <td>{{ item.EName }}</td>
              <td>{{ item.Gender }}</td>
              <td>{{ item.Tel }}</td>
              <td>{{ item.Salary }}</td>
            </tr>
          </tbody>
        </table>
	</div>
</EmpList>

父子组件传值

子组件:

props:{
	//只能获取一次 Number为数据类型
	coId:Number
},
//子组件为一个单独的vue周期，尽管点击取消后页面消失，但其vue周期并未结束，打开仍是原来的页面
watch:{
    coId(newId){
        this.form.coId = this.newId;        
        this.backFill();
    }
},
methods:{
    //关闭父弹窗
    close(){
        //执行绑定父组件插槽上属性名为close的事件 @close
        this.$emit("close");
    },
    upd(){
        //修改成功后 @updSuccess
        this.$emit("updSuccess");
    },
}

父组件:

<courseUpd :coId="coId" @close="close" @updSuccess="updSuccess"></courseUpd>

methods:{
	close(){
		//子组件调用父组件方法关闭页面
		this.dialogVisiable = false;
	},
	updSuccess(){
		
		this.dialogVisiable = false;
		//刷新列表
		this.getCourseList();
	},
}

Element-UI

详情见:https://element.eleme.cn/#/zh-CN/component

下载包：

npm i element-ui -S

全局中引入:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

布尔类型、格式化输出(插槽)：

<el-table-column prop="Salary" label="薪资" align="center">
    <template slot-scope="scope">
     ￥<span>{{ scope.row.Salary }}</span>
    </template>
</el-table-column>

与aId=aId??0同理

aId: this.condition.aId || 0

分页(插槽拼接):

	<table  align="center">
      <tr>
        <td>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.pageIndex"
            :page-sizes="[1, 3, 5]"
            :page-size="pager.pageSize"
            layout="total,slot,sizes"
            :total="pager.recordCount"
            prev-text="上一页"
            next-text="下一页"
            background
          >
            <span class="el-pagination__total"
              >每页{{ pager.pageSize }}条&emsp;当前{{ pager.pageIndex }}/{{
                pager.pageCount
              }}页</span
            >
          </el-pagination>
        </td>
        <td>
          <!-- 首页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.pageIndex"
            :page-sizes="[1, 3, 5]"
            :page-size="pager.pageSize"
            layout="slot, prev, pager, next"
            :total="pager.recordCount"
            prev-text="上一页"
            next-text="下一页"
            background
          >            
              <button
                type="button"
                class="btn-prev"
                @click="handleCurrentChange(1)"
                :disabled="pager.pageIndex == 1"
              >
                首页
              </button>            
          </el-pagination>
        </td>
        <td>
          <!-- 尾页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.pageIndex"
            :page-sizes="[1, 3, 5]"
            :page-size="pager.pageSize"
            layout="slot,jumper"
            :total="pager.recordCount"
            prev-text="上一页"
            next-text="下一页"
            background
          >            
              <button
                type="button"
                class="btn-next"
                @click="handleCurrentChange(pager.pageCount)"
                :disabled="pager.pageIndex == pager.pageCount"
              >
                尾页
              </button>            
          </el-pagination>
        </td>
      </tr>
    </table>

添加页面:（Element UI Snippets：elt elf eltc elfi ）

<template >
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="width: 500px; margin: 5px auto"
    >
        <!-- 下拉框 -->
      <el-form-item label="校区" prop="AId" align="left">
        <el-select
          v-model="form.AId"
          placeholder="校区"
          @change="getCollegeList(form.AId)"
          clearable
        >
          <el-option
            v-for="item in areaList"
            :key="item.AId"
            :label="item.AName"
            :value="item.AId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学院" prop="CId" align="left">
        <el-select
          v-model="form.CId"
          placeholder="学院"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="item in collegeList"
            :key="item.CId"
            :label="item.CName"
            :value="item.CId"
          ></el-option>
        </el-select>
      </el-form-item>
        <!-- 文本框 -->
      <el-form-item label="姓名" prop="EName">
        <el-input v-model="form.EName"></el-input>
      </el-form-item>
        <!-- 单选框 -->
      <el-form-item label="性别" prop="Gender" align="left">
        <el-radio-group v-model="form.Gender">
          <el-radio :label="true">男</el-radio>
          <el-radio :label="false">女</el-radio>
        </el-radio-group>
      </el-form-item>
        <!-- 日期框 -->
      <el-form-item label="出生日期" prop="Birthday">
         <el-date-picker
          type="date"
          value-format="yyyy-MM-dd"
          v-model="form.Birthday"
          placeholder="出生日期"
         >
         </el-date-picker>
      </el-form-item>  
      <el-form-item label="职位" prop="PId" align="left">
        <el-select
          v-model="form.PId"
          placeholder="职位"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="item in positionList"
            :key="item.PId"
            :label="item.PName"
            :value="item.PId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号码" prop="IdCard">
        <el-input
          v-model="form.IdCard"
          maxlength="18"
          show-word-limit
        ></el-input>
      </el-form-item>
        <!-- 日期框 -->
      <el-form-item label="报告日期" prop="RDate">
        <el-date-picker
          v-model="report.RDate"
          type="date"
          placeholder="报告日期"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="薪资" prop="Salary">
        <el-input v-model="form.Salary"></el-input>
      </el-form-item>
		<!-- 单图片上传 -->
        <el-form-item label="图片" prop="Picture" align="left">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:24395/api/Emp/FileUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="form.Picture"
            :src="'http://localhost:24395/Files/' + form.Picture"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
        <!-- 复选框 -->
      <el-form-item label="爱好" prop="HobbyArr" align="left">
        <el-checkbox-group v-model="form.HobbyArr">
          <el-checkbox label="唱歌">唱歌</el-checkbox>
          <el-checkbox label="跳舞">跳舞</el-checkbox>
          <el-checkbox label="电影">电影</el-checkbox>
          <el-checkbox label="编程">编程</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
        <!-- 文本域 -->
        <el-form-item label="个人简介" prop="Description">
        <el-input
          type="textarea"
          v-model="form.Description"
          :row="5"
          placeholder="个人简介"
          maxlength="200"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        EName: "",
        AId: "",
        CId: "",
        PId: "",
        Gender: null,
        IdCard: "",
        RDate: "",
        Salary: "",
        Hobby: "",
        //爱好数组
        HobbyArr: [],
      },
      //控件检测
      rules: {
        EName: [
          { required: true, message: "请输入员工名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在3到5个字符", trigger: "blur" },
        ],
        AId: [{ required: true, message: "请选择校区", trigger: "change" }],
        CId: [{ required: true, message: "请选择学院", trigger: "change" }],
        PId: [{ required: true, message: "请选择职位", trigger: "change" }],
        Gender: null,
        IdCard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            min: 18,
            max: 18,
            message: "身份证号码只能输入18位",
            trigger: "blur",
          },
        ],
        RDate: [{ required: true, message: "请输入入职日期", trigger: "blur" }],
        Salary: [
          { required: true, message: "请输入员工薪资", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "薪资只能输入数字",
            trigger: "blur",
          },
        ],
        Hobby: "",
        HobbyArr: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个爱好",
            trigger: "change",
          },
        ],
      },

      //下拉列表
      areaList: [],
      collegeList: [],
      positionList: [],
    };
  },
  methods: {
     //复制ElementUI官网Form表单验证中按钮事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.add();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取校区列表
    getAreaList() {
      this.axios.get("/College/GetAreas").then((res) => {
        this.areaList = res.data;
      });
    },
    //获取学院列表
    getCollegeList(id) {
      //设置默认值为请选择
      this.form.CId = "";
      this.axios.get("/Emp/GetCollegesByAId?aId=" + id).then((res) => {
        this.collegeList = res.data;
      });
    },
    //获取职业列表
    getPositionList() {
      this.axios.get("/Emp/GetPositions").then((res) => {
        this.positionList = res.data;
      });
    },
    //员工添加
    add() {
      //非空验证
      //if (!/^\d{18}$/.test(this.form.IdCard)) {
      //alert("身份证号码只能输入18位数字");
      //return;
      //}
      //判断非undefind null 0
      //if(!this.form.AId)
      this.form.Hobby = this.form.HobbyArr.toString();
      this.axios.post("/Emp/EmpAdd", this.form).then((res) => {
        if (res.data > 0) {
          this.$message.success("添加成功");
          this.$router.push("/eleUI");
        } else {
          this.$message.error("添加失败");
        }
      });
    },
  },
  created() {
    this.getAreaList();
    this.getPositionList();
  },
};
</script>
<style >
</style>

级联选择器

/// <summary>
/// 获取级联列表
/// </summary>
/// <returns>级联列表</returns>
public object GetCascadeList()
{
    var area = db.Areas;
    var college = db.Colleges;
    var query = area.Select(x => new
    {
        value = x.AId,
        label = x.AName,
        level = 1,
        children = college.Where(y => y.AId == x.AId).Select(z => new
        {
            value = z.CId,
            label = z.CName,
            level = 2,
        }).ToList()
    }).ToList();
    return query;
}

分组统计（案例：统计校区下的学院列表）

/// <summary>
/// 分组统计 校区下的学院数量
/// </summary>
/// <returns>校区下的学院数量</returns>
public object CollegeCountByArea2()
{
    var list = (from a in db.Areas
                join b in db.Colleges on a.AId equals b.AId
                select new
                {
                    a.AName,
                }).ToList().GroupBy(x => x.AName).Select(y => new
                {
                    aName = y.Key,
                    count = y.Count()
                });
    return list;
}

<template v-for="(item, index) in groupList">
      <el-tag :type="tagColor[index]" :key="index"
        >{{ item.aName }}:{{ item.count }}</el-tag
      >&emsp;
</template>

		<el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :router="true"
        >
          <el-submenu index="1" v-for="item in treeForm" :key="item.value">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item
              v-for="item1 in item.children"
              :key="item1.value"
              :index="'/classNav?aId=' + item.value + '&cId=' + item1.value"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">{{ item1.label }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>

/* 侦听器 */
watch: {
	//$route: {
    "$route.query": {
      //深层监听
      deep: true,
      //immediate:"true" 该回调将会在侦听开始之后被立即调用
      handler(newval) {
        console.log(newval);
        //修改查询条件
        this.condition.aId = newval.aId;
        this.condition.cId = newval.cId;
        this.getClassList();
      },
    },
  },

动态路由

{
    path: "/classM/:aId/:cId",
    name: "classM",
    component: () => import("../views/Class/ClassManually.vue")
},

取值:
this.$route.params.aId
this.$route.params.cId

NLog

安装NLog

NLog.Web.AspNetCore 和 NLog.Config

配置NLog

右键API下的NLog.config找到源文件，复制，移除项目下的NLog.config文件，再粘贴。

<target xsi:type="File" name="f" fileName="${basedir}/logs/${shortdate}.log"
				layout="${longdate} ${uppercase:${level}} ${message}" />

<logger name="命名空间.*" minlevel="Debug" writeTo="f" />

注入NLog（Program.cs）

//引入命名空间
using NLog.Web;
//注入NLog
builder.Host.UseNLog();

ECharts

安装ECarts组件

npm install echarts vue-echarts --save

卸载组件

npm uninstall 组件名 --save

引入Echarts组件

import "echarts";

import VueEcharts from "vue-echarts";

注册组件

components: {

VueEcharts,

样式详情见 https://echarts.apache.org/examples/zh/index.html#chart-type-bar

Vue-Echarts版本更新(6.6.1=>6.6.2)导致无法显示柱状图（Can't get DOM width or height.）
<VueEcharts :init-options="{width:300px,height:300px}" autoresize></VueEcharts>
或者下载6.6.1版本
npm i [email protected] -S
网上另一种说法页面未渲染完毕前已经加载图表(graph)导致的无法显示 设置延迟加载
mounted(){
	setTimeOut(()=>{
		this.getGraph();
	},800)
}

工具提示：

tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

标签：vue,item,笔记,工作,axios,组件,query,message
From： https://www.cnblogs.com/keepingstudying/p/18236210

快捷键

设置路由: router/index/js

v-if/v-else-if/v-else的使用

下拉框绑定

过滤器

main.js中设置基础路径

获取地址栏传值

级联关系重复解决方案:Cascade=>NoAction

解决浏览器编译错误时，取消全屏覆盖（建议关掉） vue.config.js

点击链接按钮无反应

vue实例的生命周期

组件

插槽:给组件预留位置

父子组件传值

Element-UI

全局中引入:

分页(插槽拼接):

添加页面:（Element UI Snippets：elt elf eltc elfi ）

级联选择器

分组统计（案例：统计校区下的学院列表）

动态Navigation Menu和侦听器

动态路由

NLog

安装NLog

配置NLog

注入NLog（Program.cs）

ECharts

安装ECarts组件

引入Echarts组件

注册组件

相关文章

赞助商

阅读排行

工作笔记（6）

快捷键

设置路由: router/index/js

v-if/v-else-if/v-else的使用

下拉框绑定

过滤器

main.js中设置基础路径

获取地址栏传值

级联关系重复 解决方案:Cascade=>NoAction

解决浏览器编译错误时，取消全屏覆盖（建议关掉） vue.config.js

点击链接按钮无反应

vue实例的生命周期

组件

插槽:给组件预留位置

父子组件传值

Element-UI

全局中引入:

分页(插槽拼接):

添加页面:（Element UI Snippets：elt elf eltc elfi ）

级联选择器

分组统计（案例：统计校区下的学院列表）

动态Navigation Menu和侦听器

动态路由

NLog

安装NLog

配置NLog

注入NLog（Program.cs）

ECharts

安装ECarts组件

引入Echarts组件

注册组件

相关文章

赞助商

阅读排行

级联关系重复解决方案:Cascade=>NoAction