简易的web全栈开发——前端部分_痛快web全栈项目

初始化前端项目

技术栈为webpack+vue。
先是安装webpack

npm install --save-dev webpack
npm install --save-dev webpack-cli
1
2

初始化npm，npm以及node的安装不介绍了，很久以前安装的

npm init -y
1

为了后续使用起来方便快捷，我们可以添加配置文件（webpack.config.js）以及修改npm脚本（package.json）。将所需要的配置项预先写好而不是调用webpack时写在命令行中。

暂时先添加打包相关的简单配置，目的是先走通打包上传至服务器的步骤

这是比较简略的webpack.config.js，大致意思就是将./src/index.js作为入口打包出一个名为bundle.js的产物放在dist文件夹中，同时利用html生成插件会生成一个html文件，bundle.js会被涵盖其中。

webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index_bundle.js'
    },
    plugins: [new HtmlWebpackPlugin()]
};
1
2
3
4
5
6
7
8
9
10
11
12

这是最简单的webpack打包脚本，运行脚本

package.json
  "scripts": {
    "build": "webpack"
  },
1
2
3
4

接着就是随便写个./src/index.js并尝试下打包，可以看到正常引入并执行了我的代码

前端部署至服务器

我使用过两种部署方式，一种是本地打包完后用sftp上传至服务器指定文件夹，一种是用github提供的GitHub Actions 自托管运行器在机器上打包。这个服务器只有一个月的时间，就不折腾了，简单的用sftp上传下吧。vscode就有sftp的插件。下次买一年的服务器时，可以再试试github action的功能
配置好sftp的服务器配置后，点击上传即可上传至指定的/opt/nginx/html目录了

可以看到，我这里已经上传成功了

同时需要重新配置一下nginx.conf，指定以/fe/路径都访问dist文件夹，并开启gzip压缩

	gzip  on;
	serve{
	......
        location ^~ /fe {
            add_header  Content-Type 'text/html; charset=utf-8';
            alias /opt/nginx/html/dist;
        }
    }
1
2
3
4
5
6
7
8

使用vue构建前端项目

由于后端服务还没有上线，所以这里先用vue构建一个简单的前端的静态页面，利用vue route的一个单页应用
安装与使用vue，vue官网的 npm init vue@latest会自动使用vite作为打包构建的工具

我这里已经写过了webpack了，就不换了，直接把自动生成的带vue route的src代码给移动出来即可。

需要注意的时需要在自己的package.json中添加vue和vue route的引用。另外需要把webpack.config.js的的入口也改成./src/main.js

由于webpack本身并不能直接识别并打包vue文件，我们需要给它安装loader去处理vue文件，即vue-loader。
同时一个项目中还有一些别的loader，如vue-template-compiler，babel-loader，css-loader等。使用 npm install -D 将其加入开发依赖即可。按照官方文档设置如下。

另外还有一些小配置，例如vue的代码中使用了@做为路径，那么需要在webpack.config.js中进行设置，将模式调为开发模式，便于我们进行错误排查，设置打包前清理/dist文件夹。

另外由于我没有使用vite，所以路由这里也需要改一下，直接删除应该就可以了，不然打包完访问会报错Uncaught TypeError: Cannot read properties of undefined (reading ‘BASE_URL’)。同时这里用的history模式，但是之前nginx已经设置了alias，这里将其改为hash模式，方便使用

由于之前的html文件完全是插件自动生成的，导致vue无法挂载，需要自己写一个html文件做为模板，要求有id=app的div，并在html生成插件中指定


打包上传即可

内容开发

计划做的是一个表格，可以自由的对页面中的表格做增删改查操作

使用webpack-dev-server做为开发的工具，先在本地调式完毕再去部署，本地开发时请求服务器接口涉及跨域问题，所以也需要再webpack中配置

npm install --save-dev webpack-dev-server
1

webpack.config.js
  devServer: {
    static: './dist',
    proxy: {
      '/api': { target: 'http://43.143.157.137', changeOrigin: true },
    },
  },
1
2
3
4
5
6
7

package.json
"start": "webpack serve --open",
1
2

接入axios做为请求库，npm install axios

main.js
import axios from 'axios'
const domain = window.location.host
axios.defaults.baseURL = `http://${domain}/`
app.config.globalProperties.axios = axios
1
2
3
4
5

修改路由配置，将默认的路由设置为我们自定义的table组件
具体的页面相关的代码就不贴了，就以一个按钮做示例吧

部署服务器并成功访问后端以及数据库

剩下的就是类似的实现，以及纯前端逻辑了，就贴代码了