Vue.js实战之博客页面前端

Vue.js 前端

字数统计: 1.2k阅读时长: 5 min

 2022/11/14 

基于Vue-cli的前端项目初始化

初始化

Vue-cli环境配置详情见前端框架之Vue.js（一）安装小节里的“使用npm安装”内容。

初始化一个新项目，创建文件夹tutorproject作为项目目录，打开一个终端将切换路径到tutorproject，运行代码以创建front-end文件夹：

PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject> vue create front-end

运行结果如下：
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> first ([Vue 3] babel, eslint)
  ssecond ([Vue 3] babel, eslint)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

使用方向键选中Default ([Vue 2] babel, eslint)选项后按下键盘上的回车键，然后脚手架工具就开始构建项目，并且安装所需的依赖。

将切换路径到front-end，运行代码以启动Vue应用程序：

1 2	PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject> cd front-end PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject\front-end> npm run serve

打开浏览器输入网址http://localhost:8080/，即可看到应用程序：

组件Ping.vue

将\tutorproject\front-end\src\components目录下的HelloWorld.vue文件删除，并在当前目录下新建文件Ping.vue：

<template>
  <div>
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'Ping',
  data(){
    return {
      msg:'Hello,This is Ping.vue component'
    }
  }
}
</script>

在tutorproject\front-end\src目录下新建路由文件夹router，并在router文件夹中新建文件index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Ping from '@/components/Ping'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            name:'Ping',
            component:Ping
        }
    ]
})

修改front-end\src\App.vue中<script>...</script>部分的import代码如下：

1 2	<script> import HelloWorld from './components/Ping.vue'

修改front-end\vue.config.js文件的代码以关闭语法检查：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false //关闭语法检查
})

此时的代码结构如下：

再次在浏览器中访问http://localhost:8080/，可以看到页面发生了变化：

使用axios与API交互

在cmd中按下ctrl+c停止应用程序，使用以下命令安装axios:

1	PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject\front-end> cnpm install axios --save

依赖关系自动写进了front-end\package.json中，在package.json文件的dependencies里可以看到刚安装的axios。

输入npm run serve重新启动Vue。

修改\front-end\src\components\Ping.vue中<script>...</script>部分的代码如下：

<script>
import axios from 'axios'

export default {
  name: 'Ping',
  data(){
    return {
      msg:''
    }
  },
  methods:{
    getMessage(){
      const path='http://localhost:5000/api/ping'
      axios.get(path)
        .then((res)=>{
          this.msg=res.data;
        })
        .catch((error)=>{
          console.error(error);
        })
    }
  },
  created(){
    this.getMessage()
  }
}
</script>

另外打开一个终端将切换路径到tutorproject\back-end（博客后端的项目文件），运行代码以运行flask服务端：

1
2

PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject\back-end> venv\Scripts\activate
(venv) PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject\back-end> flask run

此时在浏览器中访问http://localhost:8080/，可以看到页面再次发生了变化：

若没有获取到后端API端口的数据pong!，解决方案如下：

停止flask的运行，使用pip安装Flask-Cors包

1
2

(venv) PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject\back-end> pip install flask-Cors
(venv) PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject\back-end> pip freeze > requirements.txt

然后修改tutorproject\back-end\tutorweb\__init__.py：

from flask import Flask
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from config import Config

#定义Flack_SQLAlchemy
db=SQLAlchemy()

#定义Flack_Migrate 
migrate=Migrate()

def create_app(config_class=Config):
    app=Flask(__name__)
    app.config.from_object(config_class)

    #启用CORS
    CORS(app)
    #初始化Flack_SQLAlchemy
    db.init_app(app)
    #初始化Flack_Migrate 
    migrate.init_app(app,db)

    #注册blueprint
    from tutorweb.api import bp as api_bp
    app.register_blueprint(api_bp,url_prefix='/api')
    
    return app 
from tutorweb import models

然后再启动flask，访问http://localhost:8080/页面即可。

引入element-UI

使用cnpm命令安装：

1	PS C:\Users\Administrator\Desktop\code_learn\flask_exercise\tutorproject\front-end> cnpm install element-ui -S

修改\front-end\src\main.js，引入element-UI样式：

import { createApp } from 'vue'
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

createApp(App).mount('#app')

修改\front-end\src\components\Ping.vue中<template>...</template>部分的代码，创建element-UI风格的按钮：

<template>
  <div>
    <el-button type="primary" round>{{msg}}</el-button>
  </div>
</template>

在浏览器中访问http://localhost:8080/，可以看到element-UI风格的按钮pong!：

至此，博客前端的欢迎页面完成，页面的具体样式可以根据自己的喜好自行更改。

博客后续的登录注册等页面，由于代码过多且繁杂，暂且不表，该部分的后续看心情更新。（除非...评论区呼声高，嗯！）

原文作者：唐抉

原文链接：http://tangmenjue.top/2022/11/14/Vue.js%E5%AE%9E%E6%88%98%E4%B9%8B%E5%8D%9A%E5%AE%A2%E9%A1%B5%E9%9D%A2%E5%89%8D%E7%AB%AF/

发表日期：November 14th 2022, 5:33:51 pm

更新日期：November 14th 2022, 5:33:51 pm

Next Post

CentOS 7之关于网络管理的那些知识
Previous Post

前端框架之Vue.js（六）

CATALOG

1. 基于Vue-cli的前端项目初始化