网站建设 之 django+vue

 

搜索安装node。

是通过这篇文章实现的：

http://dockone.io/article/8834

先别用docker，先跑起webapp再说。

https://blog.csdn.net/alvinliu2031/article/details/81039741

vue只是脚手架，它仍然要发布到tomcat或者别的什么。上传到任何一个服务器目录即可。

每个node进程都是一个app，通过nginx管理入口。解析地址进行端口分发。

因此现在只有node就可以。

打包后非常简约，完完全全就是index，css，js前端文件。

打包出来的东西基本都不可读。

现在打算弄到node+vue就可以见客了，最终一定弄到nginx+node+vue。

这里大致明白是怎么回事了。。。但开发环境如何与mysql交互呢？也是一样的，只不过是自己的mysql，一样的。

注意vue还是前端，它不是后端，后端仍然要后端的程序，例如django。。。vue连接数据库是不可行的。是vue连接django，django连接数据库。

你仍然需要django，甚至之后仍然需要nginx。就不能前后端结合吗？

重学Django，重学vue(我干嘛用Django啊，配置这么恶心，用node不香吗。。。)

以后写vue的话，可以在自己的机器上写，写完后上传到目标文件夹里，非常爽啊。

命名的确是个学问，现在只有django，以后还会加上vue，采用迭代开发，先只有django，然后再加上vue，然后再加上mysql，然后再上docker，同时名字也逐步想好。sharesoft真是太逊了，而且域名很难搞定。起名字就不能用。作为一个网站的后台，用background，前台就是foreground，用什么template啊，是吧。

采用迭代开发的话，就用一个test文件夹了，里面是test1,test2什么的。

发现了一个问题，没有django，我也不想安装了。这里直接用容器做了。

可以给容器命名：

docker run --name=meaningful_name

当然，用compose启动容器，这样才能挂载卷。

出现一个问题，如果挂载卷的话，那么必须制作一个dockerfile来开辟一个文件夹并指定工作文件夹，是这样的，

你需要进行挂载了，将vue目录中的dict add到里面不合适，这就会丢失实时开发的能力，必须挂载卷。

直接挂载到那个工程就可以了，这里就需要重新制定镜像，写docker文件

先在宿主机上创建一个django_vue文件夹，用来写Dockerfile

创建一个dict文件夹，

在python下的项目文件夹下的-settings.py中配置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue-admin-master/dist'], # 修改内容

说明是从项目总目录开始的

把vue的静态文件夹的目录配置到项目中【添加静态文件夹路径】

STATIC_URL = '/static/'

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'vue-admin-master/dist/static/'), # 添加内容
]

修改django的主目录的urls文件

from django.contrib import admin
from django.urls import path
from blog import views
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name='index.html')),
]

接下来重新生成一个镜像，命名为vue_django

接下来写dockerfile和docker-compose.yml

from vue_django

workdir /web

version: '3'

services:

    web:

        build: ./

        ports:

            - "8000:8000"

        volumes:

            - ../../sharesoft/dist:/web/dist

成功了！vue本来就是很容易成功的，现在只对vue修改前端就好了，说实话，必要时把后端也剥离出来才行，全部都放到sharesoft，这样vscode就比较容易全部编辑到。

接下来就是重新编排卷，把background也挂载。

容器里转移出来

sudo docker container cp -a 容器id:SRC_PATH DEST_PATH

做好了，紧接着挂载卷，里面的就不要了。

成功。

紧接着vscode连接。

出现一个大问题，要把个人文件夹里的.ssh里的know_host全部清空，否则会出错。

并不会实时更改，就好像拷贝过一份一样。重启试试？

重启也不行，强制刷新也不变，那是因为没有打包。。。

npm run build

打包还特别慢。。。

打包完后确实可以了。

之所以只能在本地是因为conf文件夹里是localhost，改成0.0.0.0应该就没问题了。

并不是很友好啊，，，文件打开太慢了

太棒了太棒了太棒了，npm run dev也能用，简直颅内高潮啊。

行了，今天是事情算做完了。

现在感觉vue跟微信小程序有点像了，都需要配置路由，然后都是page而已，要新建一个page文件夹。

在需要加载路由的地方，使用Vue组件 router-view 去加载，这个就好像占位符吧。

export default new Router({
   // routes用来定义路由对象，里面的每一个对象都是一个路由
 routes: [
   {
     path: '/', // 碰到这个路径跳转路由至index
     name: 'index',  // 给这个路由取的一个别名
     component: index // 代表在当前路径下，加载index路由
   }
 ]
})

@click='$router.push({name:"movieDetail"})'

进入详情页就是这样实现的，跟微信小程序也差不了多少嘛。$router.push() 属于编程式路由