vue2.0搭配php,vue cli2.0 + php + mysql 面向过程升级成面向对象

最新推荐文章于 2024-04-22 19:48:33 发布
最新推荐文章于 2024-04-22 19:48:33 发布
阅读量198 收藏
点赞数
文章标签： vue2.0搭配php

一、前言

上期用最简单技术形式走通了前后台的需求，制作了一个任务管理系统，方便记录并规划每天的成长。

写任务的核心是为了更好的规划时间，想象让你做一个计划系统你该如何考虑？

1)首先你必须有地方去写，有地方展示

2)展示时需区别未完成和已完成的状态

3)需要规定一个结束日期，并且加入提醒，到指定时间未完成的任务，需要写清理由。

4)......

所以这期做一下调整：

1. 整体界面需要重新修改

2.PHP从面向过程升级成面向对象

3.删除接口从物理删除变为逻辑删除

4.因布局调整所影响前端逻辑的改良

5.基础SQL语法举一反三

二、调整样式

4742fac0adb6

修改前

4742fac0adb6

修改后

三、业务梳理

前端逻辑主要是练习vue基本语法，以及事件触发之间的逻辑关系，如何跟php交互数据。

主要功能：

用户输入添加后变为待办项，完成后用户勾选变为已办项，每一项计划可删除和编辑，还记录了计划的条数和未完成的条数

4742fac0adb6

勾选的样子

4742fac0adb6

修改内容的样子

四、前端布局

上期的布局及样式完全推倒重做，代码如下：

id="box">

任务便签

总数为 {{ arr.length}}个，还有 {{ choose() }}个未完成

【

class="span1"

@click='finish()'>清除已选

】【

@click='Allfinish()'

style="color:#35b96d;">全部清除

】

  • v-bind:class='{finish: item.bol}'>

    {{index+1}}

    v-model='item.bol'

    @change="updataFn()">

    v-show='!item.edit'

    @click='edit(index)'>

    v-model='item.des'

    v-show='item.edit'

    v-on:keyup.13='item.edit = !item.edit'

    @blur='item.edit = false;updataFn()'>

    @click='del(item.des)'>

type="text"

class="add"

v-model='msg'

v-on:keyup.13="add">

保存

-------------------------------------------------------------------------------------------------------------------

export default {

name: 'HelloWorld',

data () {

return {

arr: [

// 数据结构:

// des: 任务描述

// bol: 任务完成标志

// edit: 任务编辑标志

// { des:'设计', bol:false, edit:false }

],

msg: ''

}

},

created () {

if (localStorage.getItem('msg')) {

//如果有就读取msg存到arr数组中

this.arr = JSON.parse(localStorage.getItem('msg'))

}

},

methods: {

// 添加(判断msg是否为空，如果不为空就给arr数组里push内容，然后在把msg设置为空)

add: function () {

if (this.msg.replace(/[\r\n]/g, "") == '') {

this.msg = ''

alert('请输入名称');

return;

} else {

for (var i = 0; i 

if (this.arr[i].des == this.msg.replace(/[\r\n]/g, "")) {

this.msg = ''

alert('任务名称不能重复');

return;

}

}

}

this.arr.push({ des: this.msg.replace(/[\r\n]/g, ""), bol: false, edit: false });

localStorage.setItem('msg', JSON.stringify(this.arr))

this.msg = ''

},

//更新到本地存储中

updataFn: function () {

localStorage.setItem('msg', JSON.stringify(this.arr))

},

// 返回未完成的数量

choose: function () {

var num = 0;    // 未完成的数量

this.arr.forEach(function (item) {

if (!item.bol) {

num += 1;

}

});

return num;

},

// 返回未完成的任务

finish: function () {

var forNum = 0;

for (var i = 0; i 

if (this.arr[i].bol) {

forNum++

}

}

if (forNum == 0) {

alert('您需要选中复选框删除');

}

var temp = this.arr;

this.arr = []

for (var i = 0; i 

if (!temp[i].bol) {

this.arr.push(temp[i]);

console.log(temp[i])

}

}

this.updataFn();

},

//单条删除

del (des) {

var index = this.arr.findIndex(item => {

if (item.des == des) {

return true

}

})

this.arr.splice(index, 1)

this.updataFn();

},

//清除每条数据

Allfinish () {

if (this.arr.length == 0) {

alert('没有可删除的选项')

} else {

this.arr = [];

this.updataFn();

}

},

// 编辑

edit: function (i) {

if (this.arr[i].bol) {

return;

}

this.arr[i].edit = true;

}

}

}

--------------------------------------------------------------------------------------------------------------

.redStyle{background:#ccc;display:inline-block;width:20px;height:20px;vertical-align:middle}

h4{color:#252434}

.delBtn{margin-top:15px;float:right;background:url(../../src/assets/del.png) no-repeat;background-size:60%;vertical-align:middle}

#box{width:580px;margin:30px auto;background:#fff;color:#222131;padding:30px 50px;border:1px solid #252434;border-bottom-width:4px;border-radius:3px;font-family:"Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei"}

li:nth-child(2n+2){margin-right:0}

.icon_num{opacity:.8;color:#fff;box-sizing:border-box;border-radius:100%;display:inline-block;background:#35b96d;font-size:11px;left:-5px;width:15px;height:15px;line-height:15px;vertical-align:middle;text-align:center;bottom:-8px;border-radius:100%}

input[type=text]{outline:0;width:100%;border:1px solid #f9f9f9}

li{position:relative;background:#fff;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;padding:0 11px;list-style-type:none;width:47%;line-height:40px;font-size:14px;color:#5e5d6d;margin-bottom:10px;margin-right:16px;float:left;font-size:12px;overflow:hidden}

ul{padding-left:0;margin-top:30px;margin-bottom:20px;overflow:hidden}

.add{width:100%;height:80px;margin-right:10px;margin-bottom:5px;outline:0}

.span1{color:#87ceeb}

.finish{box-sizing:border-box;color:#ccc;text-decoration:line-through;height:40px;line-height:40px;background:#eee;font-size:14px;border:none}

textarea{border:1px solid #252434;font-family:"Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei";padding:5px 10px;box-sizing:border-box;background:#fff;color:#252434}

button{outline:0;width:100%;background:#252434;border:none;height:40px;color:#ccc}

五、后台逻辑

六、下期预告

⚠ 下期会增加定时提醒(包含声音和弹窗提示)，历史查询和显示以天为单位。

⚠ 下期会增加删除的再次询问功能，避免误删。

⚠ 下期会调整修改的布局样式。

⚠ 下下期做一个响应式布局，来适配手机端、平板、pc端。

⚠  下下期加入登录和注册功能，加入users表。

孔良
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2和thinkphp搭建的前后端分离项目
magic_xiang的博客
02-03 1917
大学生论坛 采用vue2和thinkphp搭建的前后端分离项目 Github地址 项目说明 本项目为前后端分离项目： 前端采用vue2全家桶(包括vue-router/vuex)搭建，http请求采用axios，组件UI采用element-ui，对象存储采用七牛云（需要自己配置），实现客户端上传图片，目前已完成功能(用户登录注册、用户中心、基于wangedit...
php和vue配合使用技巧和方法
10-17
在本篇文章中小编给大家分享了关于php和vue配合使用技巧和方法，需要的朋友们参考学习下吧。
基于php+vue+mysql的超市商品管理系统(含论文)
Timi2019的博客
04-22 958
首页、个人中心、商品分类管理、商品信息管理、上架信息管理、下架信息管理、销售信息管理、管理员管理。
vue2.0搭配php,Vue2.0设置全局样式实例分享
weixin_42297846的博客
03-17 153
本文主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可)第一步：在src目录下的main.js,也就是入口文件里面添加下面代码require('!style-loader!css-loader!less-loader!./commo...
vue2.0和php,vue cli2.0 + php + mysql实战
weixin_39606244的博客
03-11 164
一、前言从前端技术到后台技术的融合，从简单到完善，记录了一个项目的诞生过程。二、目录0.jquery + php + mysql模板编程1.jquery + Dreamweaver+php + mysql 可视化后台2.jquery + php + mysql 面向过程6.vue cli3.0 + thinkphp+ mysql 升级vue cli 2.0变3.07.vue cli3.0 + t...
带你入门vue2.0及案例开发php,Vue2.0 探索之路——vue-router入门教程和总结
weixin_39555715的博客
03-11 91
前言这是关于vue的第三篇博文。没想到写的还有人看，正是因为你们的阅读和点赞收藏，才给了我无比的动力。请关注我的专栏，我不会停更的。最近也一直在想，前端知识怎么提高，前端知识的碎片化，让我感觉好多好多都不会，觉得这个时候我应该确定一个方向，重点的培养自己的招牌技能，再加以辅助技能。不过看了很多博文也暂时没有形成具体的路线，就先暂定写博文吧。今天主要讲解一下 vue-router 的相关知识，路由路...
怎么在vue-cli用php,在vue-cli中如何实现移动端自适应
weixin_35723036的博客
03-22 139
这篇文章主要介绍了基于vue-cli配置lib-flexible + rem实现移动端自适应,需要的朋友可以参考下安装flexiblenpm install lib-flexible --save引入flexible在项目入口文件main.js中添加如下代码，引入flexibleimport 'lib-flexible'px 转 rem使用 webpack 的 px2rem-loader,自动将p...
my-account:个人记账系统：前端：vue2.0 + webpack + vue-cli + vue-route + axios后台：nodejs + express + mysql
03-11
vue2.0 + webpack + vue-cli + vue-router + vuex 二，后台my-account-server Node.js + Express + MySQL 三，设计需求 登录：个人账户信息 记录个人每日进出账务信息，主要细分包括：日期类型金额成员备注 可根据...
EZInfo：信息博客（Vue CLI + Django RESTful + Mysql + ElementUI + Echarts + PeerJS）
02-10
前端：Vue + ElementUI + Axios + Echarts + PeerJS 后端：Django RESTful + Mysql +翻译 跑 cd前端> npm install npm运行构建将backend / temp_static文件夹中的文件移动到backend / static文件夹workon env_...
vue+nodejs+mysql 实现旅行网站
01-27
1. **项目初始化**：创建项目目录，安装所需的依赖库，如Vue CLI、Node.js、Express、MySQL驱动（如mysql2）等。 2. **后端开发**：使用Node.js和Express搭建服务器，设置路由，实现API接口，连接MySQL数据库，处理...
vue+springboot+redis+mysql 分布式系统
10-11
在Vue项目中，通常会使用Vue CLI来快速初始化项目，然后通过单文件组件（Single File Components）组织代码，实现视图层与逻辑层的解耦。 Spring Boot 是基于Spring框架的微服务开发工具，它简化了Spring应用的初始...
vue商城+php后端+mysql数据库完整版
09-21
vue商城+php后端+mysql数据库完整版,可用于二次开发,或参考学习.
基于vue的个人网站设计vue-router、vue-cli、iview的项目（包含后台php与数据库）
05-27
基于vue的单页面应用项目代码，项目的演示地址https://www.ai0011.com/work/ 应用了vue路由、iview、php、mysql等技术
毕业设计-仿京东商城（Vue+Node+Mysql）
最新发布
05-04
毕业设计——仿京东商城（Vue+Node+Mysql） ## 前端架构 - 页面结构(H5,CSS3,原生JS) - 框架(基于Vue脚手架:vue-cli)进行搭建 - 数据请求处理框架(Axios) - Vue-Router进行路由处理 - Vue-LazyLoad进行图片赖加载 ...
vue+PHP+MySQL
hjj1198的博客
09-12 1915
Vue+PHP+MySQL实现一次性多图片上传，QQ空间朋友圈微博图片动态发表 1.功能描述 图片上传在大多Web项目中应该都是必备功能之一，单独上传一张图片比较容易实现，如果要一次性上传多张图片就会麻烦许多。不管是对前端还是后端来说，工作量都比上传单张照片要大得多。 这次的博客就来总结一下如何使用Vue+PHP实现一次性上传多张图片。 前端：Vue，Bootstrap (如果项目中没有这两个也...
vue php mysql增删改查表格_vue案例表格的增删改查
weixin_31598511的博客
01-30 517
vue的增删改查功能，1 使用命令创建一个vue项目vue init webpack test22 创建过程不再演示3 接下来就是数据的增删改查功能大致如图所示因为增加，和删除比较简单我们先演示增加和删除4 这是我的代码 这里是比较基础的代码 ，script里面模拟的数据书名：编号：日期：请输入查找关键字：名称编号日期操作{{book.name}}{{book.id}}{{book.d}}修...
vue php mysql增删改查表格_使用vue基础创建增删改查
weixin_27012007的博客
01-30 309
这篇文章主要介绍了从vue基础开始创建一个简单的增删改查的实例代码，需要的朋友参考下1、安装vue-cli cnpm install vue-cli -g --执行全局安装2、创建一个webpack的基础项目；命令：vue init webpack myproject;以下是项目的目录结构及说明build是webpack配置build.js // 生产环境构建代码check-v...
Vue显示数据：Vue+PHP+Mysql
soos的博客
06-14 1553
vue请求后端数据
vue php mysql增删改查表格_vue实现表格增删改查效果的实例代码
weixin_39672572的博客
02-11 268
整理文档，搜刮出一个vue实现表格增删改查效果的实例代码，稍微整理精简一下做下分享。实现效果我们把这些用户信息保存到list的数组中，然后增删改查就在这个数组上进行：list: [{username: 'aaaaa',email: '123@qq.com',sex: '男',province: '北京市',hobby: ['篮球', '读书', '编程']},{username: 'bbbbb',...
nodejs+Vue+MySQL实现客服系统；具体过程以及代码
06-08
实现一个使用Node.js+Vue+MySQL的客服系统，需要以下几个步骤： 1. 创建一个MySQL数据库，用于存储客户信息和聊天记录； 2. 创建一个Node.js后端，提供API接口，用于客户端和管理端进行数据交互； 3. 创建一个Vue前端，实现在线聊天和管理客户的操作。 下面是一个简单的示例，使用Node.js+Vue+MySQL实现客服系统的具体过程和代码： 1. 创建MySQL数据库 同样的，我们需要创建一个MySQL数据库，用于存储客户信息和聊天记录。可以使用上面的SQL语句来创建。 2. 使用Node.js连接MySQL数据库 安装mysql模块，使用以下代码连接MySQL数据库： ``` const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '', database: 'customer_service' }); connection.connect(); ``` 3. 创建API接口 在Node.js后端中创建API接口，用于客户端和管理端进行数据交互。可以使用Express框架来创建API接口。 ``` const express = require('express'); const app = express(); // 获取所有客户信息 app.get('/customers', (req, res) => { connection.query('SELECT * FROM customers', (error, results, fields) => { if (error) throw error; res.json(results); }); }); // 根据客户ID获取聊天记录 app.get('/messages/:customerId', (req, res) => { const customerId = req.params.customerId; connection.query('SELECT * FROM messages WHERE customer_id = ?', [customerId], (error, results, fields) => { if (error) throw error; res.json(results); }); }); // 发送聊天消息 app.post('/messages', (req, res) => { const { customerId, sender, message } = req.body; connection.query('INSERT INTO messages (customer_id, sender, message) VALUES (?, ?, ?)', [customerId, sender, message], (error, results, fields) => { if (error) throw error; res.json({ success: true }); }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 4. 创建Vue前端 使用Vue框架创建前端界面，实现在线聊天和管理客户的操作。可以使用Vue CLI工具来创建Vue项目。 ``` vue create customer-service ``` 创建成功后，在src目录下创建一个components目录，用于存放Vue组件。 5. 实现客户列表组件 在components目录下创建一个Customers.vue组件，用于显示客户列表。 ``` <template> <div> <table> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr v-for="customer in customers" :key="customer.id"> <td>{{ customer.name }}</td> <td>{{ customer.email }}</td> <td>{{ customer.phone }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { customers: [] }; }, mounted() { fetch('/customers') .then(response => response.json()) .then(customers => { this.customers = customers; }); } }; </script> ``` 6. 实现聊天记录组件 在components目录下创建一个Messages.vue组件，用于显示聊天记录。 ``` <template> <div> <h3>{{ customer.name }}'s Messages</h3> <ul> <li v-for="message in messages" :key="message.id"> <strong>{{ message.sender }}</strong>: {{ message.message }} </li> </ul> <form @submit.prevent="sendMessage"> <input type="text" v-model="message" placeholder="Type your message here"> <button type="submit">Send</button> </form> </div> </template> <script> export default { props: ['customer'], data() { return { messages: [], message: '' }; }, mounted() { fetch(`/messages/${this.customer.id}`) .then(response => response.json()) .then(messages => { this.messages = messages; }); }, methods: { sendMessage() { fetch('/messages', { method: 'POST', body: JSON.stringify({ customerId: this.customer.id, sender: 'customer', message: this.message }), headers: { 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(result => { if (result.success) { this.messages.push({ sender: 'customer', message: this.message }); this.message = ''; } }); } } }; </script> ``` 7. 实现客户详情组件 在components目录下创建一个Customer.vue组件，用于显示客户详情。 ``` <template> <div> <h3>{{ customer.name }}</h3> <p>Email: {{ customer.email }}</p> <p>Phone: {{ customer.phone }}</p> <messages :customer="customer"></messages> </div> </template> <script> import Messages from './Messages.vue'; export default { components: { Messages }, props: ['customer'] }; </script> ``` 8. 实现路由配置 在src目录下创建一个router.js文件，用于配置路由。 ``` import Vue from 'vue'; import VueRouter from 'vue-router'; import Customers from './components/Customers.vue'; import Customer from './components/Customer.vue'; Vue.use(VueRouter); const routes = [ { path: '/', component: Customers }, { path: '/customers/:id', component: Customer } ]; const router = new VueRouter({ mode: 'history', routes }); export default router; ``` 9. 启动客户系统 在根目录下创建一个server.js文件，用于启动Node.js后端。 ``` const express = require('express'); const app = express(); const cors = require('cors'); const mysql = require('mysql'); const router = require('./router'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '', database: 'customer_service' }); connection.connect(); app.use(cors()); app.use(express.json()); app.use(router); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 在根目录下创建一个vue.config.js文件，用于配置Vue前端的代理服务器。 ``` module.exports = { devServer: { proxy: { '/': { target: 'http://localhost:3000', ws: true, changeOrigin: true } } } }; ``` 最后，在命令行中分别启动Node.js后端和Vue前端： ``` node server.js npm run serve ``` 以上代码仅仅是一个简单的示例，实际的客服系统需要更多的功能和细节处理，例如用户认证、消息推送等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值