蓝鲸结合vue部署手册

最新推荐文章于 2024-04-24 09:41:32 发布

药引子1

最新推荐文章于 2024-04-24 09:41:32 发布

阅读量2.3k

点赞数

分类专栏：部署文章标签：运维

本文链接：https://blog.csdn.net/weixin_43784418/article/details/105515637

版权

部署专栏收录该内容

2 篇文章 0 订阅

订阅专栏

部署SaaS到测试/正式环境

修改应用基本配置

修改配置文件中Saas平台创建应用生成的APP_ID、APP_TOKEN，配置BK_PAAS_HOST为蓝鲸实际访问路径，APP_NAME为页面标题。

编写第一个应用程序，HelloWorld

创建应用

# 根路径执行命令
python manage.py startapp demo

编写第一个程序HelloWorld，在刚刚新建的app中创建views文件夹，在views文件夹下创建helloWorld.py文件，在文件中编写简单的helloWorld并返回。

# 打印结果
def hello(request):
    logger.info("helloWorld")
    result = {"message": "helloworld",
              "data": {"user": request.user.username, "time": datetime.now().strftime('%Y-%m-%d %H:%M:%S')},
              "result": "true"}
    return JsonResponse(result, safe=False)

定义访问路径,在urls.py文件里面添加访问路径

# -*- coding: utf-8 -*-
"""
urls config
"""
from django.conf.urls import patterns

# python根路径导入要加from点
from . import views

urlpatterns = patterns(
    url(r'^$', views.home),
    url(r'^dev-guide/$', views.dev_guide),
    url(r'^contact/$', views.contact),
    url(r'^api/test$', helloWorld.hello)
)

在蓝鲸 Django 开发框架新建一个 Vue.js 前端工程项目

安装vue-cli
```
npm install -g @vue/cli
```
创建vue-app
```
vue create frontend
```
cd到前端路径
```
cd frontend 
```
添加路由
```
vue add router
```

修改package.json配置

"build": "vue-cli-service build --dest ../static/dist",

引入jquery、bootstrap
```
npm install jquery bootstrap@3 -S
```
引入less
```
npm install less less-loader -S
```

引入axios

	npm install axios -S

安装完后在src目录新建service/index.js,配置如下

import Axios from 'axios'

const base = process.env.NODE_ENV === 'development' ? '/' : window.baseUrl

const instance = Axios.create({
    validateStatus: (status) => {
        return status >= 200 && status < 300;
    },
    withCredentials: true,
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: 'X-CSRFToken',
    baseURL: base
})

export default instance

引入element-ui
```
	npm i element-ui -S
```

修改main.js

//在这里引入 bootstrap。默认只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也可以在这里引入 bootstrap.css ;
import "bootstrap/dist/css/bootstrap.css";
import Vue from 'vue'
import App from './App.vue'
import axios from './service'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.prototype.$http = axios
Vue.use(ElementUI);
new Vue({
	render: h => h(App),
}).$mount('#app')

通过cdn方式引入magicbox

<remote-css href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css"/>
<remote-css href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css"/>
<remote-css href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css"/>
<remote-css href="https://magicbox.bk.tencent.com/static_api/v3/assets/jstree-3.1.1/dist/themes/default/style.min.css"/>
components: {
          'remote-css': {
              render(createElement) {
                  return createElement('link', {attrs: {rel: 'stylesheet', href: this.href}})
              },
              props: {
                  href: {type: String, required: true}
              }
          }
          // 'remote-js': {
          //   render (createElement) {
          //     return createElement('script', { attrs: { type: 'text/javascript', src: this.src } })
          //   },
          //   props: {
          //     src: { type: String, required: true }
          //   }
          // }
      }

新建vue.config.js

const webpack = require('webpack');
var path = require('path')
var env = process.env.NODE_ENV
var isProduction = env === 'production'
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: 'error',
    publicPath: isProduction ?'./static/dist': '/',
    filenameHashing: false,
    devServer: {
        proxy: 'http://localhost:8000',
        disableHostCheck: true,
        port: 8080
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
            })
        ]
    },
    css: {
        loaderOptions: {
            sass: {
                data: `
          @import "~@a/style/variable.scss";
        `
            }
        }
    },
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@a', resolve('src/assets'))
            .set('@c', resolve('src/components'))
            .set('@s', resolve('src/service'))
            .set('@w', resolve('src/widget'))
        config.optimization.delete('splitChunks')
    }
}

编译前端框架
```
npm run build
```

修改templates下的base.html，并删除导航条及尾部说明(导航条写入vue中，方便跳转路由)

    <script type="text/javascript">
  	var app_code = "{{ APP_CODE }}";			// 在蓝鲸系统里面注册的"应用编码"
  	var site_url = "{{ SITE_URL }}";			// app的url前缀,在ajax调用的时候，应该加上该前缀
  	var remote_static_url = "{{ REMOTE_STATIC_URL }}";   //远程资源链接，403页面需要，不要删除
  	var debug_mode = JSON.parse("{{ DEBUG }}");	// 是否调试模式
      window.baseUrl = '{{ SITE_URL }}';//添加根路径访问
  </script>

修改对应模块下templates下的index_home.html

    	{% extends "base.html" %}
  	{#插入base.html指定位置#}
  	{% block head %}
  		<title>蓝鲸模考</title>
  		 <link href={{ STATIC_URL }}dist/css/app.css rel=stylesheet>
  	{% endblock %}
  	
  	{% block navigation %}
  	{% endblock %}
  	
  	{% block content %}
  		<div id=app></div>
  	{% endblock %}
  	
  	{% block extra_block %}
  	    <script type=text/javascript src={{ STATIC_URL }}dist/js/app.js></script>
  	{% endblock %}