Django common commands/vue-cli graphical interface creation method/vueo-cli command line creation method/Ruoyi framework/elementui

Django common commands

django-admin.exe startproject mysite

python .\manage.py startup app app01

python manage.py makemigrations

python manage.py migrate

python manage.py runserver

python manage.py runserver 0.0.0.0:8000

 

from django.shortcuts import render,HttpResponse ​ # Create your views here. def index(request):    return HttpResponse("欢迎使用")

Install mysqlclient

pip install mysqlclient==1.4.1

Or mysqlclient wheel

Install by running the command on the console:pip install wheel mysqlclient-1.4.6-cp36-cp36m-win_amd64.whl

https://www.lfd.uci.edu/~gohlke/pythonlibs/#

DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.mysql',
    'NAME':'test',
    'USER': 'root',
    'PASSWORD': 'root',
    'HOST': '127.0.0.1',
    'PORT': '3307',
    }
}

Django basic addition, deletion, modification and query:

def depart(request):    # ORM操作    # 新增    #models.Department.objects.create(title="销售部",count=10)    #models.Department.objects.create(**{"title":"销售部","count":0}) ​    #查询    #queryset=models.Department.objects.all()    #queryset=models.Department.objects.filter(id__gt=1)#id>1    # for obj in queryset:    #     print(obj.id,obj.title,obj.count)    #obj=models.Department.objects.filter(id=1).first()    #print(obj.id,obj.title,obj.count) ​    #删除    #models.Department.objects.filter(id=1).delete() ​    #更新    models.Department.objects.filter(id=2).update(count=100)    return HttpResponse("执行成功")

Install the pagoda panel

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
pip freeze > requirements.txt

Pagoda Linux deployment Django project tutorial | with MySQL database:

Pagoda Linux deployment Django project tutorial | with MySQL database - Bilibili

Internal Server Error 500 or 502 error occurs when accessing Pagoda deployment django project:

Internal Server Error 500 or 502 error occurs when accessing Pagoda deployment django project_django internal server error_Chi Ge's Blog-CSDN Blog

find / -name activate
​
source /www/wwwroot/192.168.217.129/cc3fa4c899d98135868fd15f22d04b7d_venv/lib/python3.6/venv/scripts/common/activate
pip install -r /www/wwwroot/192.168.217.129/requirements.txt

bt restart

location / { include uwsgi_params; uwsgi_pass 127.0.0.1:9001; #The port must be the same as that configured in uwsgi uwsgi_param UWSGI_SCRIPT box.wsgi; #The directory name where wsgi.py is located +.wsgi uwsgi_param UWSGI_CHDIR /www/wwwroot/192.168.217.129/ ; #Project path} location /static/ { alias /www/wwwroot/192.168.217.129/static/; #Static resource path } 

#Add configuration selection [uwsgi] #Configure the socket connection to connect to nginx socket=127.0.0.1:9001 #Configure the project path, the directory where the project is located chdir=/www/wwwroot/192.168.217.129/ #Configure the wsgi interface module file path, That is, the directory where the wsgi.py file is located wsgi-file=box/wsgi.py #Configure the number of started processes processes=4 #Configure the number of threads for each process threads=2 #Configure the startup management main process master=True #Configuration Store the process ID file of the main process pidfile=uwsgi.pid #Configure dump logging daemonize=/www/wwwroot/192.168.217.129/ 
uwsgi.log`

How to create multiple apps: Project root path C:\Users\18428\PycharmProjects

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('app02/', include("Apps.app02.urls")), path('app01', include("Apps.app01.urls")), ]

vue-admin-template

Install vue

After downloading node.js, add it to the environment variables

node.js and directory creation node_global node_cache

vue -V If an error is reported, add npm to the environment variable C:\Users\18428\AppData\Roaming\npm

Add to environment variables C:\Program Files\nodejs

Add to environment variable C:\Program Files\nodejs\node_global

Add to environment variable C:\Program Files\nodejs\node_cache

Run the following parameters in administrator mode

Global module dependency package npm config set prefix "C:\Program Files\nodejs\node_global" Global cache npm config set cache "C:\Program Files\nodejs\node_cache"

Set Taobao mirror npm config set registry https://registry.npm.taobao.org

Install vue npm install vue -g

Install webpack template npm install webpack -g`

Install the vue-cli scaffolding build tool npm install -g @vue/cli

Start vue scaffolding command: vue ui

Method 1: Create vue-cli through graphical interface:

Graphical interface to create vue-cli vue installation and use and gitee code cloud deployment registration configuration public key_vue associated warehouse configuration public key_Wangjia Video Tutorial Library Blog-CSDN Blog

Problem: Vue ui creates project error: Cannot read property 'indexOf' of undefined

solve:

1. The problem of too low version:

Open cmd in administrator mode and perform the following operations

Step 1: npm uninstall vue-cli -gUninstall the previous version via Step 2: Use this command to download the new versionnpm install -g @vue/cli

Problem: The graphical interface fails to create a project on the c drive.

Solution: If the project creation in the vue interface is unsuccessful, then cd to the desktop with administrator rights cd C:/Users/18428/Desktop before creating

Installation: element

Install axios

Select Dependencies from the left menu to search for plug-ins.

run:

 Report an error

Create using the following creation method

vue init webpack code

npm i element-ui -S

Introduce element-ui

vscode syntax tips

Vscode-element-helper If you use the element-ui library, you can install this plug-in and automatically prompt el when writing tags.

Official introduction tutorial: Element - The world's most popular Vue UI framework

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Method 2: Create a command line window and introduce axios and element-ui:

Note: Enter the front-end storage directory and run: vue create vue-admin Note: If the creation is unsuccessful, please run the idea as an administrator

npm install --save axios vue-axios

Write some code in main.js

import axios from 'axios'
Vue.prototype.axios = axios

 The username and password submitted to the backend by the vue front-end post cannot be obtained by django using request.POST.get("username")

The solution is found because the submitted parameters are json, so we need to use the qs tool class to convert them.

vue+django axios post receives empty parameters_django post parameters are empty_Andy-wen's blog-CSDN blog

Solution:
1) Use cmd to open the vue project directory and install the qs module

nmp install qs --save

(2) Open main.js and quote qs

//引入qs
import qs from 'qs';  
Vue.prototype.qs = qs;

import qs from 'qs'; 

qs.stringify(this.loginForm)

login() {

      this.$refs.loginFormRef.validate(async valid => {

        if (!valid) return;

        const result = await this.$http.post("login2/", qs.stringify(this.loginForm));

        console.log(result)

      });

}

 npm i element-ui -S

main.js introduction and use

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

 vue add element

cd to the vue-admin root directory and run npm run serve after the creation is complete

This way the access is successful:

问题:Command vue init requires a global addon to be installed. Please run npm i -g @vue/cli-init and

The solution is to run cmd administrator:

Today, when I installed vue-cli globally , the above problem suddenly occurred:

The reason is because the command vue init needs to install a global add-on.

Enter the command directly: npm install -g @vue/cli-init

I use vue create first-demo and press Enter to select the third item

For method 2, please refer to the following: vue init webpack projectname

vue init webpack project name (English) // Such as: vue init webpack vuedemo

? downloading template // Downloading template? Project name (vuedemo) // Project name Enter? Project description (A Vue.js project) // Project description Enter? Author // Author Enter? Vue build (Use arrow keys ) // Select version packaging type? Runtime + Compiler: recommended for most users // Select the one above and press Enter Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere? Install vue-router? (Y/n) // Do you want to install routing? Enter N and press Enter? Use ESLint to lint your code? // Enter N and press Enter? Set up unit tests ( Y/n) // Enter N and press Enter? Setup e2e tests with Nightwatch? No // Enter N and press Enter

// Which method should we use to install the module packages that the project depends on? Should we run npm installfor you after the project has been created? (recommended) (Use arrow keys) Yes, use NPM // Use npm [If cnpm is not installed, just Use this] Enter Yes, use Yarn // Use yarn? No, I will handle that myself // If you don’t choose, you will do it later! [If cnpm is installed, it is recommended to choose this] Press Enter

# Project initialization finished! // Project initialization finished# ========================

To get started: // [Enter the following command]

cd vuedemo // Enter the project directory npm install (or if using yarn: yarn) // Install the packages that the project depends on! If cnpm is installed, it is recommended to execute cnpm i in this step [Waiting...] npm run dev //After the startup project package is installed

// After executing the above command, the following content will be displayed: DONE Compiled successfully in 6398ms 10:59:32

I Your application is running here: http://localhost:8080 // The project runs locally at http://localhost:8080

======================= Step 1: Enter the cmd window of the project storage directory Step 2: vue init webpack project name // The project name is the English number Step 3: Follow the above selection. Step 4: Execute cd project directory. Step 5: Execute cnpm i. Step 6: Execute npm run dev.

Django problem: Cross-domain CORS Missing Allow Origin

solution:

ajax -- django solved -- intercepting cross-origin requests: CORS header missing 'Access-Control-Allow-Origin - Gray Letter Network (Software Development Blog Aggregation)

Solution:

\3. Restart the current project.

Django configuration swagger

Reference tutorial: Django project uses Swagger to automatically generate API documents - Jianshu

Django projects use Swagger to automatically generate API documentation

Introduction

After the interface development is completed, the next step is to write the interface document. Traditional interface documentation is written using Word or some other interface document management platform. It is troublesome to maintain and update interface documents in this form. Every time there is a change in the interface, the document must be modified manually.

Swagger is a very useful tool for managing Api documents. Not only does the Spring series have a toolkit for automatically generating Swagger Api documents, but Python also has one (the configuration is very, very simple)!

Django is connected to Swagger. When introducing the method of connecting Django to Swagger, many materials on the Internet are based on the django-rest-swagger library. As everyone knows, starting from June 2019, the official has abandoned this library. In django 3.0 This library is no longer supported and is replaced by a new third-party drf-yasg library.

use

1.Installation

Install drf-yasg library

pip install drf-yasg

2. Edit the settings file

Modify the project settings.py file and add api and drf_yasg.

INSTALLED_APPS = [
    ...
    'drf_yasg',   
]

3.Routing settings

Edit the url.py file

# Configure various parameters of swagger 
from drf_yasg import openapi 
from drf_yasg.views import get_schema_view 
​schema_view
= get_schema_view( 
    openapi.Info( 
        title="XX project API", # name 
        default_version="version v1.0.0", # version 
        description="XX project API interaction documents are automatically generated by Swagger", # Project description 
    ), 
    public=True, 
) 
urlpatterns
= [ 
# These two url configurations must be present, used to generate the UI interface, other urls can be defined normally just 
    path(' swagger/', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'), path( 
    'redoc/', schema_view.with_ui('redoc', cache_timeout=0), name= 'schema-redoc'), 
]

\1. Create a middlewares.py file under the app and write the following code:

from django.utils.deprecation import MiddlewareMixin
​
​
​
class MyTest(MiddlewareMixin):
​
​
​
    def process_response(self, request, response):
​
​
​
        response['Access-Control-Allow-Origin'] = "*"
​
​
​
        return response

\2. Register the middleware you just wrote in setting.py:

MIDDLEWARE = [
​
​
​
    ... ...
​
​
​
    'apidemo.middlewares.MyTest',
​
​
​
]

4. Test access

Access after restarting the project

Swagger http://127.0.0.1:8000/swagger/

redoc ui http://127.0.0.1:8000/redoc/

Install vue-admin-template

git clone GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

Run vscode as administrator: npm install

Run npm run dev

{

path: '/',

component: Layout,

redirect: '/and',

children: [{

path: 'and',

name: 'and',

component: () => import('@/views/and/index'),

meta: { title: 'User Management', icon: 'dashboard' }

}]

},

Install vue-element-admin

# Clone the project 
git clone https://github.com/PanJiaChen/vue-element-admin.git 
​#
Enter the project directory 
cd vue-element-admin 
​#
Install dependencies 
npm install 
​#
It is recommended not to use cnpm as there are various installation issues The weird bug can be solved by the following operations: npm 
install --registry=https://registry.npmmirror.com 
​#
Local development startup project 
npm run dev

vueAdmin-template is a set of background management system basic templates (at least streamlined version) based on vue-element-admin, which can be used as a template for secondary development.

GitHub address: https://github.com/PanJiaChen/vue-admin-template

Suggestion: You can carry out secondary development based on vue-admin-template, use vue-element-admin as a toolbox, and copy whatever functions or components you want from vue-element-admin.

When using npm install to install dependencies, an error occurs npm ERR! Error while executing

When using npm install to install dependencies, an error occurs npm ERR! Error while executing_surprisejavascript's blog-CSDN blog

You will find that none of the above were successful until I saw this post.

git clone [email protected]:constfiv/vue-element-admin-fix-install-problem.git

Run vsde as administrator

npm install

npm run dev

Analysis and solutions for npm install failure, as well as the repaired code address [An effective solution verified by 2000+ people]

To-do

ConstFiv 

Built in

2022-02-22 14:17

The reason for this failure is due to the rename of tui-editor (rich text editor plug-in), which has now been renamed toast-ui/editor (the first step below) and the plug-in has also renamed its file name (the second step below) And rename the method name (the third step below)

The solution is as follows: 1. First modify the tui-editor line in package.json to "@toast-ui/editor": "^3.1.3",

2. Enter the \src\components\MarkdownEditor\index.vue file, delete all its imports and replace them with the following four lines import 'codemirror/lib/codemirror.css' import '@toast-ui/editor/dist/toastui-editor .css' import Editor from '@toast-ui/editor' import defaultOptions from './default-options'

3. Replace the getValue and setValue of the page (still the file in the second article) with getMarkdown and setMarkdown respectively. Replace all tui-editors in the page with @toast-ui/editor.

4. Save the file and npm install is done.

Or you can directly go to this address to clone the project file I repaired: vue-element-admin-fix-install-problem: Let me make a small advertisement: My domain name vue4.com is on sale in Alibaba Cloud. Clone it and just npm install it, and it will work normally. Started, corresponding to the master branch of Brother Pant. This library is only for temporary use by brothers who are troubled by the installation failure. I will delete it after Brother Pant repairs his own library.

RuoYi - Vue

git clone [email protected]:y_project/RuoYi-Vue.git

To download  Redis-x64-5.0.14.1.zip  , it is recommended to use Thunder download

Redis installation + set password

1. Download the Redis installation package and unzip it.

2. Open a cmd window and use the cd command to switch directories to C:\redis and run:

redis-server.exe redis.windows.conf

At this time, open another cmd window. Do not close the original one, otherwise you will not be able to access the server.

redis-cli.exe -h 127.0.0.1 -p 6379

3. The client uses the config get requirepass command to check the password.

config get requirepass

1

1)“requirepass”

2)"" //default empty

4. The client uses the config set requirepass yourpassword command to set the password.

config set requirepass 123456

1

5. Once a password is set, it must be verified first, otherwise all operations will be unavailable.

config get requirepass

1

(error)NOAUTH Authentication required

6. Use auth password to verify password

auth 123456

OK

config get requirepass

1 2 3

1)“requirepass”

2)“123456”

7. Log out and log in again

redis-cli.exe -h 127.0.0.1 -p 6379 -a 123456

—————————————— Copyright statement: This article is an original article by CSDN blogger “Moguidongdong” and follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement when reprinting . Original link: Redis installation + password setting_podman installation redis setting password_Moguidongdong's blog-CSDN blog

startup framework

Reference Tutorial: RuoYi Framework RuoYi Project Operation Startup Tutorial [Fool's Tutorial] - Feng Nayun

Problem: java: diamond operator is not supported in -source 1.5

(Please use -source 7 or higher to enable the diamond operator)

Important: Navigate to the error reporting interface to add dependency reflection and add <String,String>

http://localhost:8080/

cmd to switch to the terminal of the ruoyi-ui directory and run

Run npm i as administrator to download all dependencies

npm run dev run

Important: Code Generation

Other problem demonstration records

git common commands

 git status View completion status

git add . Commit to buffer

git commit -m "Login function completed" commit information

git branch view branches

git checkout master select branch

git merge branch name merge branch

git push commit code

vscode submit code

 JSON Online Editor-BeJSON.com JSON Online Editor, JSON Online Formatting Tool, JSON Validation Tool, JSON Editor Online, JSON tools https://www.bejson.com/jsoneditoronline/

How to submit code to gitee in pycharm 

How to submit code to gitee in pycharm - Zhihu

Submit code to Git repository on PyCharm_pycharm submit code to git_cuckooman's blog-CSDN blog

Guess you like

Origin blog.csdn.net/qq_35622606/article/details/130649553