基于Vue2.0、Element-UI、Django、MySQL实现的学生管理系统.zip

# 基于Vue2.0、Element-UI、Django、MySQL实现的学生管理系统 **实现前后端分离，前端使用Vue2.0、Element-UI，后端使用Django，数据库选用MySQL** **实现管理员登录、注册、修改密码，未登录不能进入主页面，采用路由守卫和localStorage** **实现对学生数据的增删改查，对课程数据的增删改查** **实现对学生院系分布情况和学生专业人数统计的统计图表** **具体页面效果可查看pic文件夹**    ## 1. 创建Django项目、Vue项目和sims_app #### Anaconda下 到项目创建的目录下，输入： ```shell django-admin startproject sims_project cd sims_project python manage.py startapp sims_app python manage.py makemigrations python manage.py migrate python manage.py runserver ``` #### Cmd下 到sims_project同级目录下，输入： ```shell vue create sims_vue ``` 选择vue2版本，一直默认即可 vscode中安装所需要的包： ```shell npm install echarts@4.6.0 npm install vue-router@3.2.0 npm i element-ui npm i vuex@3 npm install axios ``` #### 打包 原文链接：https://blog.csdn.net/weixin_53072519/article/details/122186102 在根目录 src 下创建文件 vue.config.js，需注意文件名称必须是 vue.config.js，然后在文件中插入以下代码： ```javascript //打包配置文件 module.exports = { lintOnSave:false, assetsDir: 'static', parallel: false, publicPath: './', devServer: { //启动项目在8000端口自动打开 open: true, host:'0.0.0.0', port: 8000, proxy: 'http://localhost:8000', }, }; ``` 将Vue路由及前端页面全部搭建完，**即写完所有Vue代码后**，输入打包命令： ```shell npm run build ``` 然后将打包后的dist文件移动至sims_project文件夹里 #### 项目结构  #### 启动项目 在Anaconda下输入python manage.py runserver，默认打开8000端口，复制链接到浏览器即可 ## 2. 修改Django默认配置 ```python #1. 注释掉csrf验证 'django.middleware.csrf.CsrfViewMiddleware', #2. 在DIRS中添加templates模板，可在里面写入html 'DIRS': [os.path.join(BASE_DIR,'templates')], #3. 修改语言配置和时区 LANGUAGE_CODE = 'zh-Hans' TIME_ZONE = 'Asia/Shanghai' USE_I18N = True USE_L10N = True USE_TZ = False #4. 加入静态文件static及指定存放位置 STATIC_URL = '/static/' STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),) #5. 在与manage.py同级的目录下创建templates和static文件夹 #6. 在INSTALLED_APPS下引入sims_app #7. 配置mysql数据库 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # 引擎，使用 mysql 'NAME': 'sims_data', # 数据库名称 'USER': 'root', # 数据库的登录用户名 'PASSWORD': '412412412', # 数据库的登录的密码 'HOST': '127.0.0.1', # 数据库所在的主机 'PORT': 3306, # 数据库使用的端口号 } } ``` ## 3. 解决Vue和Django跨域问题 ```python #8. vue和django跨域问题 原文链接：https://blog.csdn.net/qq_44614115/article/details/113578276 INSTALLED_APPS = [ 'corsheaders', ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = ( ['http://127.0.0.1:*'] ) CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', 'Pragma', ) #9. 修改setting.py 原文链接：http://t.zoukankan.com/lymmurrain-p-13894342.html STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'),# 项目默认会有的路径，如果你部署的不仅是前端打包的静态文件，项目目录static文件下还有其他文件，最好不要删 os.path.join(BASE_DIR, "dist/static"),# 加上这条 ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR,'dist')] # 加上这条，其余的是默认配置 , 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] #10. 修改vue里的vue.config.js，写入代理 devServer: { //启动项目在8000端口自动打开 open: true, host:'0.0.0.0', port: 8000, proxy: 'http://localhost:8000', }, ``` ## 4. 修改sims_project里的urls.py ```python from django.contrib import admin from django.urls import path from django.urls import include from django.views.generic import TemplateView urlpatterns = [ path('', TemplateView.as_view(template_name="index.html")), path('admin/', admin.site.urls), path('sims_app/',include('sims_app.urls')) ] ``` ## 5. 修改sims_project里的setting.py ```python """ Django settings for sims_project project. Generated by 'django-admin startproject' using Django 3.2.5. For more information on this file, see https://docs.djangoproject.com/en/3.2/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/3.2/ref/settings/ """ from pathlib import Path import os # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = 'django-insecure-z2!yleni%xmrgse#tanw_x&paan8(ser+bjr&6%dapgj^za^h-' # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'corsheaders', 'sims_app' ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] ROOT_URLCONF = 'sims_project.urls' TEMPLATES = [ { 'BACKEND': 'django.template.backends.dja