2019-01-29

个人项目

10 分钟读完 (大约 1469 个字)

vue3+egg仿掘金官网

看了egg.js后突然就想搞个全栈的项目玩玩，又喜欢在掘金上逛，所以就开发了这个项目。虽说vue3.0还没定下来，但已经能用了，喜欢它的直接在网页上搞项目，所以就用了3。
GIT地址
 预览地址有些地方用的假数据

已完成

● 首页标签分类预览
● 修改个人信息
● 图片上传
● 文章详情
● 发布沸点

预览

18/12/19 18 文章详情1.0

18/12/20 11 文章详情2.0

18/12/21 10
昨天把服务器弄好了
http://134.175.224.127:8081/
访问会很慢后面再慢慢弄，正好把域名也弄好

18/12/21 22 动态页面1.0

18/12/24 11 动态页面2.0 增加实时发布功能

项目包含

vue3.0
egg.js
腾讯云图片上传

项目搭建

vue3.0

3的话可以向之前一样用命令行建项目，也可以用图形化界面来创建，我自己的话是用图形化界面建立的，这也是选择3的原因之一

//安装
npm install -g @vue/cli
//查看版本
vue --version
//打开图形化界面
vue ui

运行成功以后会跳转到

选择你要建立项目的磁盘路径，然后点击最下面的按钮，填写项目的基本信息

到下一步的话会让你选择一些项目依赖，如果是第一次建立的话，可以选择Manual然后选择需要的依赖

接下来会让你选择eslint的相关配置，虽然eslint有时候真的是太严格了，不过养成习惯以后就会很舒服了，而且这边提供了保存和提交时自动fix的功能，所以都选上

创建完成以后，可以点击右上方的按钮直接下载想要的插件，有时候甚至会直接帮你在项目中弄好引入，省了手动写一些引入的代码

最后就是可以直接在这边运行项目了

这些只是基本搭建到运行，还有很多功能可以自己去发发掘一下。

vue3.0配置跨域

3的话需要自己手动在根目录下建立vue.config.js，内容的话还是和以前差不多的，这里贴上我的简单的跨域配置

egg.js

egg的话，官网写的还是挺详细的，跟着快速入门走一遍基本就差不多了。这里就贴上基本的连接mysql配置

腾讯云上传

因为涉及图片上传的相关东西，所以使用了腾讯云。先去腾讯云首页添加对象存储

然后创建存储桶

然后在基础设置中配置一下cors的白名单

注意这边的Expose-Headers，不设置的话到时候上传完以后的回调会没有url。

然后去这边把Secretid和SecretKey拿一下后面要用

项目中使用：

//安装一下
npm install cos-js-sdk-v5 -S

//在需要上传的文件中
import COS from "cos-js-sdk-v5";

this.myCos = new COS({
      SecretId: "你的id",
      SecretKey: "你的key"
    });
    
//在获取到上传文件对象后
this.myCos.putObject(
        {
          Bucket: "你的存储桶空间名称",
          Region: "你的存储桶所在地域",
          Key: e.target.files[0].name,//上传的文件名
          StorageClass: "STANDARD",
          Body: e.target.files[0], // 上传文件对象
          onProgress: function(progressData) {
            self.user.avator = progressData.Location;//Location就是上传完成以后的对象路径
          }
        },
        function(err, data) {
          console.log(err || data);
          console.log(data.Location);
        }
      );

服务器

购买云服务器 https://cloud.tencent.com/act/campus 加购域名(很便宜的那种几十块)
解析域名可直接选新手快速添加
登陆服务器配置环境
安装wget yum install -y wget

安装node
wget https://nodejs.org/dist/v10.14.2/node-v10.14.2-darwin-x64.tar.gz
解压 tar -xvf node-v10.14.2-darwin-x64.tar.gz
重命名 mv node-v10.14.2-darwin-x64 node
软连接(全局命令)
ln -s ~/node/bin/node /usr/bin/node
ln -s ~/node/bin/npm /usr/bin/npm
node -v
安装git yum –y install git
安装jdk yum -y install java
java -version
路径 /usr/lib/jvm
安装tomacat yum -y install tomcat
rpm -q tomcat
路径 /usr/share/tomcat

5 环境变量

vi .bashrc

填入
JAVA_HOME=/usr/lib/jvm/java

PATH=$PATH:$JAVA_HOME/bin

CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar

CATALINA_BASE=/usr/share/tomcat

CATALINA_HOME=/usr/share/tomcat

export JAVA_HOME PATH CLASSPATH CATALINA_BASE CATALINA_HOME

:wq保存以后

source .bashrc

将你的项目放到/usr/share/tomcat/webapps 下后
启动tomcat
systemctl start tomcat.service
查看
lsof -i:8080

端口重定向
iptables -t nat -A PREROUTING -p tcp –dport 80 -j REDIRECT –to-port 8080

# egg, vue