django-vue项目开发-1

django-vue项目开发

---

前言

作为一个菜鸡码农，来记录一下自己的学习，遇到的问题和成果。
此项目得到预期是基于Django和vue所实现的前后端分离的校园餐厅的点餐系统。
工具为pycharm,系统为ubuntu18
第一天就是做项目的基本框架。

---

一、创建Django项目

1.项目结构

注意：要考虑到会有前端和后端的工程文件所以要找一个合适的文件夹存储

campus_notes/
├── docs/ # 项目相关资料保存目录
├── campus_pc/ # 前端项目目录
├── campusapi/ # 后端项目目录
├── logs/ # 项目运行时/开发时日志目录
├── manage.py
├──campusapi/ # 项目主应用，开发时的代码保存
│ ├── apps/ # 开发者的代码保存目录，以模块[子应用]为目录保存
│ ├── libs/ # 第三方类库的保存目录[第三方组件、模块]
│ ├── settings/
│ ├── dev.py # 项目开发时的本地配置
│ ├── prod.py # 项目上线时的运行配置
│ ├── urls.py # 总路由
│ ├── utils/ # 多个模块[子应用]的公共函数类库[自己开发的组件]
└── scripts/ # 保存项目运营时的脚本文件

2.创建工程

django-admin startproject 工程名

注意参数设置为 runserver，最好使用虚拟环境。
3.项目配置
由于开发，和上线的配置文件不一样，所以一开始我们就要准备好。
1.新建一个settings文件夹存储，两种配置
2.将原来的settings.py文件夹的内容复制到新的开发设置dev.py中
3.删除原来的settings.py文件（一定要删除，不然后报错找不到模块）
4.更改原来的环境变量，打开manage.py进行更到新的改配置路径。

    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'campusapi.settings.dev')

二、Vue项目创建

1.创建项目

cd 项目目录
vue init webpack  名称

忘了截图了，网上找了一个图平替

终端运行

cd vue-project
npm run dev

pycharm 运行

注释：脚本写 dev

2.路由设置

路由下载：

npm i vue-router -S

初始化路由设置
在src目录下创建routers路由目录，在routers目录下创建index.js路由文件
index.js路由文件中，编写初始化路由对象的代码 .

import Vue from "vue"
import Router from "vue-router"

// 这里导入可以让让用户访问的组件

Vue.use(Router);

export default new Router({
  // 设置路由模式为‘history’，去掉默认的#
  mode: "history",
  routes:[
    // 路由列表

  ]
})

注册路由：
打开main.js文件，把router对象注册到vue中.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './routers/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

在App.vue组件中，添加显示路由对应的内容

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

总结

今天，就学到这主要就是Django和vue项目的创建工作。作为一个小白来说，就是学习的一个总结和分享，欢迎大佬的指正，希望大家共同进步。
（做博客还学会ubuntu的截图设置如果需要可以查看我的博客	https://blog.csdn.net/c2970/article/details/123906750）