数据库配置、user模块User表 、前台

一、数据库配置

1、创建数据库

1.管理员连接数据库
>: mysql -uroot -proot
​
2.创建数据库
>: create database luffy default charset=utf8;
​
3.查看用户
>: select user,host,password from mysql.user;
​
# 查看用户（5.7往后的版本）
>: select user,host,authentication_string from mysql.user;

2、为指定数据库配置指定账户

设置权限账号密码
# 授权账号命令：grant 权限(create, update) on 库.表 to '账号'@'host' identified by '密码'
​
1.配置任意ip都可以连入数据库的账户
>: grant all privileges on luffy.* to 'luffy'@'%' identified by 'Luffy123?';

​
2.由于数据库版本的问题，可能本地还连接不上，就给本地用户单独配置
>: grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'Luffy123?';

​
3.刷新一下权限
>: flush privileges;
​
只能操作luffy数据库的账户
账号：luffy
密码：Luffy123?

3、配置文件配置

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'luffy',
        'USER': 'luffy',
        'PASSWORD': 'Luffy123?',
        'HOST': 'localhost',
        'PORT': 3306
    }
}
import pymysql
pymysql.install_as_MySQLdb()

 

二、user模块User表 

1、创建user模块

前提：在 luffy 虚拟环境下
​
1.终端从项目根目录进入apps目录
>: cd luffyapi & cd apps
​
2.创建app
>: python ../../manage.py startapp user

2、创建User表对应的model：user/models.py

from django.db import models
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
    mobile = models.CharField(max_length=11, unique=True)
    # 需要pillow包的支持
    icon = models.ImageField(upload_to='icon', default='icon/default.png')
​
    class Meta:
        db_table = 'luffy_user'
        verbose_name = '用户表'
        verbose_name_plural = verbose_name
​
    def __str__(self):
        return self.username

3、注册user模块，配置User表：dev.py

INSTALLED_APPS = [
    # ...
    'user',
]
​
# 自定义User表
AUTH_USER_MODEL = 'user.User'

4、配置media

media配置：dev.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

media目录配置

"""
├── luffyapi
    └── luffyapi/
        └── media/      
            └── icon 
                └── default.png
"""

主路由：luffyapi/urls.py

from django.contrib import admin
from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings
urlpatterns = [
    path('admin/', admin.site.urls),
​
    path('user/', include('user.urls')),
​
    re_path('^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})
]

子路由：user/urls.py

from django.urls import path, include
from utils.router import router
​
# 注册ViewSet的路由
# router.register()
​
urlpatterns = [
    path('', include(router.urls)),
]

5、数据库迁移

1）去向大luffyapi所在目录的终端
​
2）安装pillow模块
pip install pillow
​
3）数据库迁移
python manage.py makemigrations
python manage.py migrate

 

 

 

三、前台

1、vue环境

1.傻瓜式安装node: 
官网下载：https://nodejs.org/zh-cn/
​
2.安装cnpm: 
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
​
3.安装vue最新脚手架: 
>: cnpm install -g @vue/cli
​
注：如果2、3步报错，清除缓存后重新走2、3步
>: npm cache clean --force

2、创建项目

前提：在目标目录新建luffy文件夹
>: cd 建立的luffy文件夹
>: vue create luffycity

3、重构项目目录

├── luffycity
    ├── public/                     # 项目共有资源
        ├── favicon.ico             # 站点图标
        └── index.html              # 主页
    ├── src/                        # 项目主应用，开发时的代码保存
        ├── assets/                 # 前台静态资源总目录
            ├── css/                # 自定义css样式
                └── global.css      # 自定义全局样式
            ├── js/                 # 自定义js样式
                └── settings.js     # 自定义配置文件
            └── img/                # 前台图片资源
        ├── components/             # 小组件目录
        ├── views/                  # 页面组件目录
        ├── App.vue                 # 根组件
        ├── main.js                 # 入口脚本文件
        ├── router          
            └── index.js            # 路由脚本文件
        store               
            └── index.js            # 仓库脚本文件
    ├── vue.config.js               # 项目配置文件
    └── *.*                         # 其他配置文件

4、文件修订：目录中非配置文件的多余文件可以移除

App.vue

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

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
​
Vue.use(VueRouter);
​
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',
    },
];
​
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
​
export default router
​

Home.vue

<template>
    <div class="home">
    </div>
</template>
​
<script>
    export default {
        name: 'home',
        components: {
        },
    }
</script>

5、全局配置：全局样式、配置文件

global.css

/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}
​
a {
    text-decoration: none;
    color: #333;
}
​
ul {
    list-style: none;
}
​
table {
    border-collapse: collapse; /* 合并边框 */
}

settings.js

export default {
    base_url: 'http://127.0.0.1:8000'
}

main.js

// 配置全局样式
import '@/assets/css/global.css'
​
// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在所有需要与后台交互的组件中：this.$settings.base_url + '再拼接具体后台路由'