笔记 - 全栈学习笔记123

九、Vue

9.1 安装

安装node

$ wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz
$ tar xf node-v14.15.4-linux-x64.tar.xz

配置环境变量

$ vim /etc/profile

# 添加环境变量 /opt/python3.7.9/bin
PATH="/opt/node-v14.15.4-linux-x64/bin:/opt/python3.7.9/bin:/opt/nginx1.19.6/sbin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin"

$ source /etc/profile  # 生效

安装vue

$ npm install vue  # vue
$ npm install -g @vue/cli  # vue-cli
$ npm install vue-router  # vue-router
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose  # cnpm
$ vue --version  # 检测版本

9.2 开始

依赖

$ vue add element  # 饿了么UI（会改变配置文件）
$ npm i element-ui -S  # 饿了么UI
$ vue add router  # 路由
$ npm install -D sass-loader sass  # Sass
$ cnpm i axios -S  # ajax
$ cnpm i vue-lazyload -S  # 懒加载
$ npm install vuex --save  # store

启动

$ vue create project-name  # 新建项目
$ vue init webpack luffy-project  # 旧版本的init功能新建项目
$ cd  project-name
$ npm run serve  # 本地运行
$ npm run build  # 编译生成静态文件

9.3 路由Router

路由配置router/index.js

import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'  // 重定向
  },
  {
    path: "/home",
    name: 'home',
    component: Home
  },
  {
    path: '/notes',
    name: 'notes',
    component: () => import('../views/Notes.vue')  // 懒加载
  }
]

视图views/Home.vue

<template>
  <div id="home">
    <div v-for="menu in homeMenu" :key="menu.id">
      <router-link :to="{ name: menu.href }">
        <span class="iconfont" v-html="menu.title"></span>
      </router-link>
    </div>
    <div><button @click="like">支持</button>{{ likeNum }}</div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      homeMenu: [
        { id: 1, title: "&#xe635;笔记", href: "notes" },
        { id: 2, title: "&#xe62d;作品", href: "opus" },
        { id: 3, title: "&#xe728;关于", href: "about" },
      ],
      likeNum: 0,
    };
  },
  methods: {
    // 支持数：/api/home/like_num
    getLikeNum() {
      this.$http
        .likeNum()
        .then((res) => {
          this.likeNum = res.data.like_num;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 支持：/api/home/like_num
    like() {
      this.$http
        .likeNumPost()
        .then((res) => {
          this.likeNum = res.data.like_num;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getLikeNum();
  },
};
</script>

<style scoped>
</style>

接口：安装ajax
```
$ cnpm i axios -S  # ajax
```

接口：配置main.js

// 导入axios
import * as api from './restful/api'
Vue.prototype.$http = api;

接口：restful/api.js

import Axios from 'axios'
// 设置公共的url接口
// Axios.defaults.baseURL = 'http://www.helloxjn.com/api/';
// 测试接口
Axios.defaults.baseURL = 'http://localhost:8000/api/';

// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
	// 在发送请求之前做些什么
	if (localStorage.getItem('token')) {
		config.headers.AUTHENTICATION = localStorage.getItem('token')
	}
	return config;
}, function (error) {
	// 对请求错误做些什么
	return Promise.reject(error);
});

// ########################################################################################

// 菜单：/api/home/menu
export const menu = () => {
	return Axios.get('home/menu').then(res => res.data);
}
// 页脚：/api/home/footer
export const footer = () => {
	return Axios.get('home/footer').then(res => res.data);
}

// 获取支持数：/api/home/like_num
export const likeNum = () => {
	return Axios.get('home/like_num').then(res => res.data);
}
// 更新支持数：/api/home/like_num
export const likeNumPost = () => {
	return Axios.post('home/like_num').then(res => res.data);
}

路由传参：router/index.js

const routes = [
  {
    path: '/notes/article',
    name: 'article',
    component: () => import('../views/Article.vue')  // 懒加载
  }
]

路由传参：传值notes.vue

<template>
  <div id="notes">
    <router-link :to="{ name: 'article', query: { hash_id: n.hash_id } }">文章</router-link>
  </div>
</template>

路由传参：取值article.vue

<template>
  <div id="notes">
    {{ this.$route.query.hash_id }}
  </div>
</template>

9.4 组件

调用方式

<template>
  <div id="app">
    <!-- 组件传递参数menuList -->
    <Header :menuList="menuList"></Header>
    <!-- 路由 -->
    <router-view />
    <Footer :menuList="menuList" :footer="footer"></Footer>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "Home",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      menuList: [],
      footer: [],
    };
  },
  methods: {
    // 菜单：/api/home/menu
    getMenu() {
      this.$http
        .menu()
        .then((res) => {
          this.menuList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 页脚菜单：/api/home/footer_menu
    getFooter() {
      this.$http
        .footer()
        .then((res) => {
          this.footer = res.data[0];
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getMenu();
    this.getFooter();
  },
};
</script>

双向绑定

<input v-model="name" type="text" :placeholder="" />

9.5 搭建简易服务器（略）

启动服务器

$ cd server
$ npm install  # 安装依赖
$ npm install pm2 -g  # 安装进程工具
$ pm2 start app.js  # 启动模拟的服务器接口

启动前端

$ cd html-pro-ele
$ npm install
$ npm run build

9.6 解决nginx部署后页面刷新404问题

nginx.conf

server {
    listen       8102;
    server_name  localhost;
    charset utf-8;
    location / {
        root /root/site_html/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

九、Vue

9.1 安装

9.2 开始

9.3 路由Router

9.4 组件

9.5 搭建简易服务器（略）

9.6 解决nginx部署后页面刷新404问题

九、Vue