本文详细介绍了Linux服务器上部署Node.js应用的步骤，包括Nginx的安装、npm配置、PM2的使用以及Vue.js组件交互。同时讲解了MongoDB数据库的安装，以及Vue实现锚点、更新按钮、表格行数设置等功能。还涉及了Git、SSH密钥、端口检查、后台进程查看等服务器管理技巧，并探讨了Vuex状态管理在前端开发中的应用。
知识图谱教学平台总结
服务器部署
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
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实现设置锚点
<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);
}
}
添加更新按钮
<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>
设置表格行数
<q-table
:pagination.sync="pagination"
>
<script>
pagination: {
rowsPerPage: 0
},
</script>
markdown使用
<mavon-editor
class="fit"
v-model="item.content"
:placeholder="item.mark"
:ishljs="true"
:subfield="false"/>
map遍历(返回对象value组成的数组)
this.currHomeworkDetails.questionSets.map(item => {
return item._id;
})
获得Vuex中的信息
this.$store.state.username;
定义分割条
<q-separator class="q-mt-md"/>
列表删除元素
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的大小
<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>
定义提示框
// 错误提示
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内容变化
<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>
设置取消按钮
<q-btn
round
flat
dense
icon="close"
class="float-right"
color="grey-8"
v-close-popup
></q-btn>
设置询问请求对话框
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
});
});
}
父组件向子组件传值
//父组件
<TermCourse class="fit-width" :term="optTerm"></TermCourse>
<script>
export default {
data() {
return {
optTerm: "", // 当前选中的学期，查询学期课程使用
}
</script>
//子组件
<script>
export default {
props: ["term"]
}
</script>
子组件向父组件传值
//子组件
<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>
父子、兄弟、跨级组件通信
var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});
//全局组件
<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 对象。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
