知识图谱教学平台总结

服务器部署

apt show nginx  //查询是否有nginx 没有使用 apt update
apt install nginx
apt install -y nodejs //安装node node -v看版本
apt install -y npm  //安装npm npm -v看版本
npm config set registry https://registry.npm.taobao.org //配置淘宝镜像
cd /var/www
mkdir /data  //隐藏文件夹  ll查看所有文件
cd /data
git clone XXX

js_18">pm2安装(后台运行node.js)服务端部署

npm2 i -g pm2
pm2 start XXX.js
pm2 list
pm2 logs index
curl XXX.com //请求网站地址

nrm工具使用

npm i -g nrm // nrm方便切换镜像
nrm current //查看当前镜像
nrm use taobao //设置成淘宝镜像

npm清除缓存

npm cache clean --force

npm升级为指定版本

npm -g install npm@6.8.0

node升级为最新版本

1）首先：查看当前node版本：

node –v

2）安装n模块：

npm install -g n

3）升级到指定版本/最新版本（该步骤可能需要花费一些时间）升级之前，可以执行n ls （查看可升级的版本），如：n 6.9.1

或者你也可以告诉管理器，安装最新的稳定版本

n stable  //稳定版
n latest  //最新版

4）安装完成后，查看Node的版本，检查升级是否成功

node -v

**注：**如果得到的版本信息不正确，你可能需要重启机器

Mongo数据库安装

apt show mongodb // 查询
apt install -y mongodb-server

服务端安装git

apt install -y git
ssh-keygen  //一路回车
cat /root/.ssh/id_rsa.pub //将内容粘贴到gitte公钥处

Linux 查看服务器开放的端口号

apt install nmap
nmap 127.0.0.1

Linux查看后台进程

ps -ef|grep python2  //查看python2运行的进程

Vue实现设置锚点

vue"><template>
<div>
    <div id='header'></div>
    <div class='footer' @click='returnTop'></div>
    </div>
</template>
methods:{
returnTop(){
	document.querySelector("#header").scrollIntoView(true);
	//document.querySelector(“要返回地方的id”).scrollIntoView(true);
	}
}

添加更新按钮

vue"><q-card-actions align="right">
    <q-btn
           v-if="questionDetailDigMode == 'modify'"
           color="positive"
           icon="autorenew"
           label="更新"
           v-close-popup
           @click.stop="handleUpdateQuestion"
           />
    <q-btn
           v-close-popup
           v-else
           color="positive"
           icon="add"
           label="添加"
           @click.stop="handleCreateQuestion"
           />
</q-card-actions>

设置表格行数

vue"><q-table
         :pagination.sync="pagination"
         >
    <script>
        pagination: {
            rowsPerPage: 0
        },
    </script>

markdown使用

vue"><mavon-editor
 class="fit"
 v-model="item.content"
 :placeholder="item.mark"
 :ishljs="true"
 :subfield="false"/>

map遍历(返回对象value组成的数组)

js">this.currHomeworkDetails.questionSets.map(item => {
          return item._id;
        })

获得Vuex中的信息

vue">this.$store.state.username;

定义分割条

vue"><q-separator class="q-mt-md"/>

列表删除元素

javascript">for (let index = 0; index < this.studentList.length; index++) {
    const element = this.studentList[index];
    if (element._id === student._id) {
        this.studentList.splice(index, 1);
    }
}

定义QDialog的大小

vue"><q-dialog v-model="medium">
      <q-card style="width: 700px; max-width: 80vw;">
        <q-card-section>
          <div class="text-h6">Medium</div>
        </q-card-section>
          
        <q-card-section class="q-pt-none">
          Click/Tap on the backdrop.
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>

定义提示框

js">// 错误提示
this.$q.notify({
    message: `请选择需要添加的课程`,
    color: "negative",
    icon: "error",
    position: "bottom",
    timeout: 300
});

//正确提示 
this.$q.notify({
    message: `添加课程成功`,
    color: "positive",
    icon: "done",
    position: "bottom",
    timeout: 300
});

// 询问对话框
this.$q
    .dialog({
    title: "请确认",
    message: `删除【${this.courseData.course.name}】，操作不可恢复！`,
    ok: {
        label: "删除",
        push: true,
        color: "negative",
    },
    cancel: {
        label: "取消",
        push: true,
    },
    persistent: true,
})
    .onOk(async () => {
    this.$emit("courseDelete", this.courseData._id);
})
    .onCancel(() => {
    this.$q.notify({
        message: "操作取消",
        type: "warning",
        timeout: 300,
    });
});

监听Q-select内容变化

vue"><q-select
          @input="getCourseKnowledgeList"
          class="col-12 col-md-5 q-mr-lg"
          label="题目所属课程"
          dense
          filled
          v-model="questionDetail.course"
          :options="courseList"
          option-label="name"
          option-value="course_id"
          ><template v-slot:prepend>
<q-icon name="navigation" size="sm" />
    </template>
</q-select>
<script>
    //获取课程知识点
    async getCourseKnowledgeList(course) {
        this.questionDetail.knowledges = [];
        let res = await getCourseKnowledgeInfo(course._id);
        if (res.data.code === 2000) {
            this.knowledgeList = res.data.data;
        }
    },</script>

设置取消按钮

vue"><q-btn
    round
    flat
    dense
    icon="close"
    class="float-right"
    color="grey-8"
    v-close-popup
></q-btn>

设置询问请求对话框

js"> this.$q
     .dialog({
     title: "请确认",
     message: `移除课程【${course.name}】，操作不可恢复！`,
     ok: {
         label: "移除",
         push: true,
         color: "negative"
     },
     cancel: {
         label: "取消",
         push: true
     },
     persistent: true
 })
     .onOk(async () => {
     let res = await delTermCourse({
         term_id:this.term._id,
         courses:[course._id]
     })
     if(res.data.code===2000){
         this.$q.notify({
             message: "移除成功",
             type: "positive",
             timeout: 1000
         });
         this.getAllCourse()
     }

 })
     .onCancel(() => {
     this.$q.notify({
         message: "操作取消",
         type: "warning",
         timeout: 300
     });
 });
}

父组件向子组件传值

vue">//父组件
<TermCourse class="fit-width" :term="optTerm"></TermCourse>
<script>
    export default {
        data() {
            return {
                optTerm: "", // 当前选中的学期，查询学期课程使用
            }
</script>
//子组件
<script>
    export default {
        props: ["term"]
    }
</script>

子组件向父组件传值

vue">//子组件
<template>
  <div>
    <q-btn @click="childEvent">{{title}}</q-btn>//绑定一个点击事件
  </div>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Demo"
    }
  },
  methods:{
    childEvent() {
      this.$emit("fatherEvent","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>
//父组件
<template>
  <div>
    <app-header @fatherEvent="updateValue(e)" ></app-header>//与子组件titleChanged自定义事件保持一致
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateValue(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header",
  }
}
</script>

父子、兄弟、跨级组件通信

vue">var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

vue">//全局组件
<div id="itany">
	<my-a></my-a>
	<my-b></my-b>
	<my-c></my-c>
</div>

//子组件a
<template id="a">
  <div>
    <h3>A组件：{{name}}</h3>
    <button @click="send">将数据发送给C组件</button>
  </div>
</template>

//子组件b
<template id="b">
  <div>
    <h3>B组件：{{age}}</h3>
    <button @click="send">将数组发送给C组件</button>
  </div>
</template>

//子组件c
<template id="c">
  <div>
    <h3>C组件：{{name}}，{{age}}</h3>
  </div>
</template>
<script>
    
var Event = new Vue();//定义一个空的Vue实例作为中间信息传输的枢纽
    
var A = {
	template: '#a',
	data() {
	  return {
	    name: 'tom'
	  }
	},
	methods: {
	  send() {
	    Event.$emit('data-a', this.name);  //发送数据 Event.$emit(事件名,数据);
	  }
	}
}

var B = {
	template: '#b',
	data() {
	  return {
	    age: 20
	  }
	},
	methods: {
	  send() {
	    Event.$emit('data-b', this.age);  //发送数据 Event.$emit(事件名,数据);
	  }
	}
}

var C = {
	template: '#c',
	data() {
	  return {
	    name: '',
	    age: ""
	  }
	},
	mounted() {//在模板编译完成后执行
	 Event.$on('data-a',name => {
	     this.name = name;  //箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
	 })  //接收数据 Event.$on(事件名,data => {});
	 Event.$on('data-b',age => {
	     this.age = age;
	 })  //接收数据 Event.$on(事件名,data => {});
	}
}

var vm = new Vue({
	el: '#itany',
	components: {
	  'my-a': A,
	  'my-b': B,
	  'my-c': C
	}
});
</script>

Vuex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RzS2xPrZ-1630392873292)(C:\Users\MI\AppData\Roaming\Typora\typora-user-images\image-20210724211900858.png)]

1. 简要介绍 Vuex 原理

Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 进行，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。

2. 简要介绍各模块在流程中的功能：

• Vue Components：Vue 组件。HTML 页面上，负责接收用户操作等交互行为，执行 dispatch 方法触发对应 action 进行回应。
• dispatch：操作行为触发方法，是唯一能执行 action 的方法。
• actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由 commit()来触发 mutation 的调用 , 间接更新 state。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装，以支持 action 的链式触发。
• commit：状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法。
• mutations：状态改变操作方法，由 actions 中的commit('mutation 名称')来触发。是 Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook 暴露出来，以进行 state 的监控等。
• state：页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
• getters：state 对象读取方法。图中没有单独列出该模块，应该被包含在了 render 中，Vue Components 通过该方法读取全局 state 对象。