Python Web（十九）Vue的基本使用

最新推荐文章于 2024-07-23 21:45:00 发布
最新推荐文章于 2024-07-23 21:45:00 发布
阅读量659 收藏 2
点赞数
文章标签： vue.js django 前端 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45187774/article/details/132831910
版权

Vue

Vue概述

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。
Vue.js读音 /vjuː/, 类似于 view
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API
Vue.js是一个构建数据驱动的Web界面的库
Vue.js是一套构建用户界面的 渐进式框架
通俗的说:
    Vue.js是一个构建数据驱动的 web 界面的渐进式框架
    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
    核心是一个响应的数据绑定系统

Vue.js使用文档
Vue.js下载
可视化学习网站

Vue基本使用

第一个Vue应用

文档

官方提供了两个包
    开发环境版本
    生产环境版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>


</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue'
        }
    })
</script>

</html>

data

基本语法

数据绑定最常见的形式就是使用“Mustache(胡子)”语法 (双大括号) 的文本插值

<span>{{ message}}</span>

Mustache 标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上message属性发生了改变，插值处的内容都会更新

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{ message }}</span> <br>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</html>

我们也可以通过改变Vue的分隔符来修改Mustache 标签
    delimiters: ['[[', ']]'],

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span>[[message]]</span> <br>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        delimiters: ['[[', ']]'],
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</html>

v-bind绑定元素属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{ message }}</span> <br>
    <span v-bind:title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br>
    <a v-bind:href="home" target="_blank">戳我有惊喜</a>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            ads: '页面加载于 ' + new Date().toLocaleString(),
            home: 'http://www.baidu.com/'
        }
    })
</script>
</html>

v-bind简写 <a :href="url">...</a>

if条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
    v-if
    v-else-if
    v-else
    v-show

v-if

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{ message }}</span> <br>
    <span :title="ads">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> <br>
    <a :href="home" target="_blank" title="惊喜">戳我有惊喜</a> <br>
    <p v-if="seen">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            ads: '页面加载于 ' + new Date().toLocaleString(),
            home: 'http://www.baidu.com/',
            seen: true,  // seen为true能看到，为false看不到
        }
    })
</script>
</html>

v-if和v-else

<a href="#" v-if="islogin">个人中心</a>
<a href="#" v-else>登录</a>

v-else要紧跟v-if后边

v-if,v-else-if和v-else

<img src="" alt="皇帝" v-if="level === 1">
<img src="" alt="皇亲" v-else-if="level === 2">
<img src="" alt="国戚" v-else-if="level === 3">
<img src="" alt="大臣" v-else>

v-show

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen" id="if">现在你看到我了</p>
    <p v-show="seen" id="show">现在你看到我了</p>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            seen: false
        }
    })
</script>
</html>

v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的
注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突

for 列表渲染

v-for指令可以绑定数组的数据来渲染一个项目列表
v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            todos: [
                {text: '学习 JavaScript'},
                {text: '学习 Vue'},
                {text: '整个牛X项目'}
            ]
        }
    })
</script>
</html>

效果：
1.学习 JavaScript
2.学习 Vue
3.整个牛X项目

index

index下标从零开始


<ol>
    <li v-for="(todo,index) in todos">
        {{ todo.text }}-{{index}}
    </li>
</ol>

效果：
1.学习 JavaScript-0
2.学习 Vue-1
3.整个牛X项目-2

对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })
</script>
</html>

效果：
·How to do lists in Vue
·Jane Doe
·2016-04-10

对象列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in items">
            {{ item.title }}~~~{{item.author}}~~~{{item.publishedAt}}
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                {
                    title: 'Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                },
                {
                    title: 'python',
                    author: 'Ricky',
                    publishedAt: '2019-04-10'
                },
                {
                    title: 'itcast',
                    author: 'itcast',
                    publishedAt: '2006-05-08'
                }
            ]
        }
    })
</script>
</html>

效果：
·Vue~~~Jane Doe~~~2016-04-10
·python~~~Ricky~~~2019-04-10
·html~~~Lucky~~~2006-05-08

methods事件

v-on

可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    })
</script>
</html>

效果：

在这里插入图片描述

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="add">Add 1</button>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                counter += 1
                alert(this.counter)
            }
        }
    })
</script>
</html>

事件处理方法传递参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="addnum(counter)">Add {{counter}}</button>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            counter: 1
        },
        methods: {
            addnum: function (num) {
                this.counter = num + this.counter
                alert(this.counter)
            }
        }
    })
</script>
</html>

v-on: 简写@

model表单绑定

单行文本框、多行文本框、单选框、多选框、下拉框
可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇。它负责监听用户的输入事件以更新数据，
并对一些极端场景进行一些特殊处理。
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。
你应该通过 JavaScript 在组件的data选项中声明初始值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>用 户 名</td>
            <td><input type="text" v-model="username" @blur="checkusername"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" v-model="password1"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" v-model="password2"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                男<input type="radio" name="sex" value="boy" v-model="sex">
                女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                足球 <input type="checkbox" name="like" value="足球" v-model="like">
                篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
                兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
            </td>
        </tr>
        <tr>
            <td>所在城市</td>
            <td>
                <select name="city" v-model="city">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td><textarea name="desc" v-model="desc"></textarea></td>
        </tr>
    </table>
    <button @click="register">注册</button>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            password1: '',
            password2: '',
            sex: '',
            like: [],
            city: '',
            desc: ''

        },
        methods: {
            register: function () {

                alert(this.username + this.password1 + this.password2 + this.sex + this.like + this.city + this.desc)
            },
            checkusername: function () {
                alert(this.username)
            }
        }
    })
</script>
</html>

todolist案例

准备工作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text">
    <button>添加</button>
    <hr/>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: ['学习Vue', '学习Django基础', '学习Django前台'],
        },
        methods: {}
    })
</script>
</html>

列表数据渲染

<ul>
    <li v-for="item in items">{{item}}</li>
</ul>

绑定数据能够添加到列表中


<body>
<div id="app">
    <input type="text" v-model="newitem">
    <button @click="addNetItem">添加</button>
    <hr/>
    <ul>
        <li v-for="item in items">{{item}}</li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: ['学习Vue', '学习Django基础', '学习Django前台'],
            newitem: '',
        },
        methods: {
            addNetItem: function () {
                this.items.push(this.newitem);
                this.newitem = '';
            }
        }
    })
</script>
</html>

实现删除功能


<div id="app">
    <input type="text" v-model="newitem">
    <button @click="addNetItem">添加</button>
    <hr/>
    <ul>
        <li v-for="(item,index) in items">
            <span>{{item}}</span>
            <a href="javascript:;" @click="deleteItem(index)">删除</a>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: ['学习Vue', '学习Django基础', '学习Django前台'],
            newitem: '',
        },
        methods: {
            addNetItem: function () {
                this.items.push(this.newitem);
                this.newitem = '';
            },
            deleteItem: function (index) {
                this.items.splice(index, 1)
            }
        }
    })
</script>
</html>

添加移动按钮，实现移动功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="newitem">
    <button @click="addNetItem">添加</button>
    <hr/>
    <ul>
        <li v-for="(item,index) in items">
            <a href="javascript:;" @click="upItem(index)">↑</a>
            <span>{{item}}</span>
            <a href="javascript:;" @click="downItem(index)">↓</a>
            <a href="javascript:;" @click="deleteItem(index)">删除</a>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: ['学习Vue', '学习Django基础', '学习Django前台'],
            newitem: '',
        },
        methods: {
            addNetItem: function () {
                this.items.push(this.newitem);
                this.newitem = '';
            },
            deleteItem: function (index) {
                this.items.splice(index, 1);
            },
            upItem: function (index) {
                current = this.items[index];
                this.items.splice(index, 1);
                this.items.splice(index - 1, 0, current);
            },
            downItem: function (index) {
                current = this.items[index];
                this.items.splice(index, 1);
                this.items.splice(index + 1, 0, current);
            }
        }
    })
</script>
</html>

ES6语法

ES6语法介绍

ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，
ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。

变量声明

ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，
ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。
变量一定要在声明后使用，否则报错

var age = 10;

let:ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，
结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。
    for (let i = 0; i < 10; i++) {}
    计数器i只在for循环体内有效，在循环体外引用就会报错。

const:const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;

JavaScript对象的写法

ES5的写法

var person = { 
    name:'python',
    age:13,
    say:function(){
        alert('hello')
    }
}

person.say()

还可以写成

var person = {};
person.name='itheima';
person.age=13;
person.say = function (){alert('hello')}
person.say();

ES6的写法

需要注意的是, 实现简写,有一个前提,必须变量名属性名一致

//定义变量
var name='python';
var age=13;
//创建对象
var person = {
    name,
    age,
    say:function(){
        alert('hello');
    }
};
//调用
person.say()

ES6的箭头函数

作用:
    定义函数新的方式
    改变this的指向
    定义函数新的方式

//无参数,无返回值
var say = ()=> {
    alert('我是无参数无返回值函数');
}
//有参数,无返回值
var eat = food => {
    alert('我喜欢吃'+food);
}
//有参数,有返回值
var total = (num1,num2) => {
    return num1+num2;
}

改变this的指向
如果层级比较深的时候, this的指向就变成了window, 这时候就可以通过箭头函数解决这个指向的问题

Vue示例生命周期

示例生命周期
在这里插入图片描述

各个生命周期函数的作用

beforeCreate
    vm对象实例化之前
created
    vm对象实例化之后
beforeMount
    vm将作用标签之前
mounted(重要时机初始化数据使用)
    vm将作用标签之后
beforeUpdate
    数据或者属性更新之前
updated
    数据或者属性更新之后

axios发送ajax请求

准备工程

创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文件

准备html和html显示

在模板文件中创建一个axios.html,内容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{ message }}</span> <br>
    <a href="javascript:;">登录</a> <br>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        delimiters: ["[[", "]]"],
        data: {
            message: 'Hello Vue!',
        },
    })
</script>
</html>

创建视图并加载模板的html

# url设置
from django.conf.urls import re_path
from users.views import ShowLoginView

urlpatterns = [
    re_path(r'^show/$', ShowLoginView.as_view()),
]


# 视图
class ShowLoginView(View):

    def get(self, request):
        return render(request, 'axios.html')

导入axios,并发送GET/POST请求

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <span>{{ message }}</span> <br>
    <span>[[ message ]]</span> <br>
    <a @click="login" href="javascript:;">登录-GET</a> <br>
    <a @click="login2" href="javascript:;">登录-GET2</a> <br>
    <a @click="login3" href="javascript:;">登录-POST</a> <br>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        delimiters: ["[[", "]]"],
        data: {
            message: 'Hello Vue!',
        },
        methods: {
            login: function () {
                let url = 'http://127.0.0.1:8000/login/?username=admin&password=123';
                axios.get(url).then(response => {
                    if (response.data.code == '200') {
                        this.message = response.data.info.username;
                    } else if (response.data.code == '400') {
                        this.message = response.data.msg;
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            login2: function () {
                let url = 'http://127.0.0.1:8000/login/';
                axios.get(url, {
                    params: {
                        "username": "admin",
                        "password": "123"
                    }
                }).then(response => {
                    if (response.data.code == '200') {
                        this.message = response.data.info.username;
                    } else if (response.data.code == '400') {
                        this.message = response.data.msg;
                    }
                }).catch(error => {
                    console.log(error)
                })
            },
            login3: function () {
                let url = 'http://127.0.0.1:8000/login/';
                axios.post(url, {
                    "username": "admin",
                    "password": "123"
                }).then(response => {
                    if (response.data.code == '200') {
                        this.message = response.data.info.username;
                    } else if (response.data.code == '400') {
                        this.message = response.data.msg;
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        }
    })
</script>
</html>

因为Vue的模板变量和django的模板变量分隔符冲突,所以需要修改Vue的分隔符delimiters:["[[","]]"]
箭头函数解决这个指向的问题

后台代码

#定义路由
from django.conf.urls import re_path
from users.views import ShowLoginView, LoginView

urlpatterns = [
    re_path(r'^show/$',ShowLoginView.as_view()),
    re_path(r'^login/$',LoginView.as_view()),
]
#定义视图
class LoginView(View):
    def get(self, request):
        #获取参数
        username = request.GET.get('username')
        password = request.GET.get('password')
        #验证参数并返回相应
        if username == 'admin' and password == '123':
            return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
        else:
            return JsonResponse({'code': 400,'msg':'账号或密码错误'})

    def post(self, request):
        # 获取参数
        data = json.loads(request.body.decode())
        username = data.get('username')
        password = data.get('password')
        # 验证参数并返回相应
        if username == 'admin' and password == '123':
            return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})
        else:
            return JsonResponse({'code': 400,'msg':'账号或密码错误'})
搬不完的砖:)
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python+vue的windows桌面应用实现方式
什么都干的派森
01-10 4492
会使用 electron 将 vue 项目打包成 exe【参考文章】会使用 python 的 fastpai 编写服务【参考文章】
Python+Vue开发Web入门实例
Dexter's Laboratory
10-18 3932
其实是个夭折了的练手项目,用Python写的后端,提供json格式数据给前端Vue进行渲染 代码写的比较乱,不过还是不忍扔掉,归档记录一下吧,以后再用到了也可以做个参考 数据库 文件列表 db.py 数据库操作 import pymysql import json class Db: def connect(self): # 设置连接属性curs...
基于python+vue的商城购物系统
本人程序员，不需要做任何吹嘘，只是实在写点程序，写点文档，熟悉各类主流框架，SSM，SpringBoot，Flask，Djiango，Mysql，Sqlite，VUE，Uniapp等，各类程序设计专家，优质作者
06-12 1023
基于python+vue的商城购物系统
Python Web前后端分离框架Django+Vue搭建
sensenxiangshang
04-30 1万+
Python Web前后端分离框架Django+Vue搭建 对前面所学知识的归纳整理，感兴趣的可以看看，欢迎指正，原文：https://github.com/HelloMasonC/fullstack/blob/master/02-%E5%90%8E%E7%AB%AF/08-Python%20Web%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E6%A1%86%E6%9E%B6%E6%90%AD%E5%BB%BA.md 一、前后端分离框架介绍 本项目基于 P
【django+mysql+vue】python web开发
weixin_43319452的博客
09-20 2255
python web开发 djangovscode 搭建 django demodjango python web 路由创建应用并注册设置应用路由，并注册应用的处理函数应用的模板页面django python web mysqlDjango配置MySQL测试连接vscode工程栏设置视图数据模型创建设置应用路由，并注册应用的处理函数应用的模板页面 vscode 搭建 django demo 是否要安装pycharm？ 有vscode就可以了，另外vscode不吃cpu，我基本上开发都上vscode上。 1.
Python Django 5 Web应用开发实战
热门推荐
weixin_43178406的博客
05-21 2万+
本文主要介绍了Python Django 5 Web应用开发实战，希望能对学习Python Web应用开发的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
Python Web 前后端分离 后台管理系统 Django+vue（完整代码）
Play_Sai的博客
06-12 1186
在前后端分离的架构中，前端和后端分别作为独立的项目进行开发和部署。（4）注册app(使用创建 django-admin startapp app名称)（4）在主路由中配置user app（主路由跟setting在同一个文件夹）（4）在主路由中配置该app（主路由跟setting在同一个文件夹）创建表完成之后进行数据库的迁移，在项目的根目录下的控制台进行。（3）子视图文件（在user app中创建一个urls）（1）管理页面前端代码（业务范围页面）（1）编写登录的前端（完整代码）1.前后端分离的架构。
VS code使用及插件（python、vue）
hrj199036的博客
06-01 729
【代码】VS code使用及插件（python、vue）
PythonWeb项目-Django+vue宾馆管理系统功能介绍
weixin_42874480的博客
06-12 1354
客房预约管理，在客房预约管理页面可以对索引、客房编号、客房图片、客房类型、客房价格、入住天数、总金额、预订时间、会员账号、会员姓名、身份证、联系方式、是否支付等内容进行详情、修改或删除等操作，修改或删除等操作，如图1-10所示。客房预订管理，在客房预订管理页面可以对索引、客房编号、客房图片、客房类型、客房价格、入住天数、总金额、预订时间、会员账号、会员姓名、身份证、联系方式、是否支付等内容进行详情或删除等操作，如图1-13所示。三层相互独立，维护方便，使用安全，三层有互相调用，提高效率。
Vue和Python前后端分离
kessity的博客
03-13 1720
但是，如果你设置的路由器工作模式是history模式，跳转到其他页面，刷新后就会报错。1、根目录下新建一个文件(一般命名为static或public)，把vue打包后的dist目录里的html、css、js文件放进去。把后面的路径当成资源，去请求服务器，而服务器下没有 /home/news 这个资源，所以就报错了。如果服务器采用的是node.js可以采用connect-history-api-fallback中间件来解决。hash模式时，不会把#/及后面的路径当成资源，去请求服务器。
使用Flask和vue-cli脚手架，开发vue3.x版本的python web 项目
guoqkmiss的博客
12-24 4868
使用 flask 和 vue-cli 脚手架，开发 vue3.x 版本的 python 与 typeScript web 项目 目前 vue3.x 版本已经出来很久了，已经有不少UI库开发者和公司在使用3.x版本了。 代码地址 github地址：https://github.com/18055975947/python-flask-vue-web 码云地址：https://gitee.com/guoqiankun/python-flask-vue-web 一、创建项目 1. 先用 pyCharm 创
使用flask和vue开发python web项目
12-31
使用flask和vue开发python版本的 web项目，一整个文件，使用pycharm创建的项目，包含vevn 文件和 __pycache__ 文件，所以内容比较大，可以直接使用。 或者：https://github.com/18055975947/python-flask-vue-web ...
Django+Vue：Python Web全栈开发
01-09
给大家分享一套课程——Django+Vue：Python Web全栈开发（基于Django4.1），已完结10章，附源码。
Python+Django+vue3全栈开发商城项目.zip
10-05
通过这个项目，开发者可以深入理解Python Web开发的流程，学习如何使用Django处理HTTP请求、实现RESTful API，以及如何利用Vue3构建现代前端应用。同时，这也是一个了解如何将前后端数据进行交互、处理用户操作和...
python-vuejs：使用一组脚本将Python Web框架和Vue.js粘合在一起……基本上是一个包装器
02-05
这个“python-vuejs”项目的目标是通过提供一个包装器，使得在Python Web应用中使用Vue.js更加简单。这意味着它可能包含了自动化脚本，用于设置Vue.js项目结构，处理API路由，甚至可能有工具帮助将Vue.js组件编译并...
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 236
前提条件：组件创建完成。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 331
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 288
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 733
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
electron-vue python flask web
09-05
Python Flask是一个轻量级的Web开发框架，使用Python语言编写，它简洁而灵活，并提供了丰富的扩展库。Flask的设计哲学是只包含必要的功能，同时保持扩展性，使开发者可以根据自己的需要添加额外的功能。 结合这两个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值