v11n Lab

如何启动项目

由于 Vue-Data-Board 这个项目不能简单地用 mock 数据来运行，所以这个项目的启动要麻烦一些，需要启动一个对应的后端项目。当然我也提供了一个线上的 api 地址可以用来提供不了解后端的同学线下开发调试。


方案一(推荐)


第一种方案，除了需要启动前端项目之外，还需要启动后端项目，首先前端项目的启动方式：

# clone the project
git clone https://github.com/dongsuo/vue-data-board.git

# enter the project directory
cd vue-data-board

# install dependency
npm install

# develop
yarn serve

# 成功启动后，终端中会显示项目的启动地址：
# App running at:
#  - Local:   http://localhost:8080/ 
#  - Network: http://192.168.0.102:8080/


然后后端项目的启动方式：


  1. 首先请保证你的电脑上已经安装好Python3 和 pip 以及 mysql
  2. 配置数据库，然后在数据库中新建一个 database
  3. clone 项目： git clone https://github.com/dongsuo/py_vislib.git
  4. cd py_vislib 进入项目目录后，安装依赖：
    1. pip install django
    2. pip install django-cors-headers 
    3. pip install mysqlclient
    4. pip install pycrypto
  1. 修改开发数据库配置：

在 /py_vislib/settings/local 中找到数据库配置部分，将相应的数据库地址、端口、database、用户名、密码修改为本地数据库对应的值

  1. 依次执行以下命令，配置开发数据库：
    1. python manage.py makemigrations --settings=py_vislib.settings.local
    2. python3 manage.py makemigrations vislib  --settings=py_vislib.settings.local
    3. python manage.py migrate --settings=py_vislib.settings.local
  1. 导入测试分析数据：

将下方数据导入到本地的测试数据库中，并将 `/vislib/views.py` 文件中 `execSql` 方法中的数据库连接方式改成对应的数据库配置。

📎vue-data-board_test_data.sql

  1. 启动项目：
    1. python manage.py runserver --settings=py_vislib.settings.local

如无意外，此时后端服务已经启动了，你可以在浏览器中打开前端项目的地址（默认为 http://localhost:8080/），你可以注册一个测试账号，愉快地 coding 了。


方案二(仅前端项目)


考虑到一部分前端同学对Python开发不熟悉，所以我也贴心地为大家部署了一台开发服务器，供不想配置后端的同学愉快地使用。

这一方案很简单，跟其他的前端项目一样，只需要几个简单的命令，但是由于线上服务不可用，需要将本地的网络请求代理到开发服务器上去。

首先项目启动：


# clone the project
git clone https://github.com/dongsuo/vue-data-board.git

# enter the project directory
cd vue-data-board

# install dependency
npm install

# develop
yarn serve


然后，配置代理：

  1. Chrome浏览器安装扩展 Proxy SwitchyOmega
  2. ：https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif
  3. 安装成功后，打开 Proxy SwitchyOmega 的配置，点击导入/导出，在在线恢复的输入框中输入配置文件的地址：https://qcloudtest-1252006172.cos.ap-guangzhou.myqcloud.com/OmegaOptions.bak, 然后点击输入框后的恢复即可，导入成功后 Proxy SwitchyOmega 中会出现三种情景模式，然后点击左下方的 应用选项按钮

image.png

  1. 配置成功后，点击浏览器右上方的 Proxy SwitchyOmega 图标，选择 vislib情景模式，然后在地址栏中打开 http://v11nlab.com (注意是http，不是https), 如果没有自动跳转至 https 线上地址，则说明项目启动成功。如果重定向至 https 线上地址，请打开开发者工具，在network面板中勾选 disable cache 后刷新页面。


这一方案虽然简单，但也有缺陷：

  1. 访问速度较慢，由于开发数据库和服务器均位于国外，因此在国内访问速度不稳定。
  2. 一些朋友可能有修改后端逻辑的需要。
  3. 由于服务器配置很低，随时有挂掉的可能。


最后希望大家 coding 愉快。

← 建表语句 →