首页 >web前端 >Vue.js > 正文

vue.js怎么连接数据库

原创2021-09-30 13:59:280384

vue.js连接数据库的方法:1、建立php站点;2、创建数据库;3、php连接数据库;4、创建vue站点;5、创建组件,连接数据库;6、加载组件;7、在app.vue中引入组件。

本文操作环境:windows10系统、php 7&&vue 2.5.2、thinkpad t480电脑。

假如我们现在要在vue页面中输入用户名和密码来进行登录,并且要将用户名和密码保存到数据库中,那么我们该如何操作呢?

1、建立PHP站点

26701d2c11a51a9b15a16d03d38c374.png

2、创建数据库

fb647303fd407b868debc21b8b894ce.png

3、php连接数据库
备注:连接方式为模块化
(1)

f06a601e0b85e570d176da04bb9c3fa.png

(2)

8a457f4e57af6c8bea693ca8ddcbc58.png

4、创建Vue站点

2ded340180ae982bf622bd310263a60.png

5、创建组件-连接数据库
备注:组件调用为模块化

ba500dbc94f206bac5b814c8ce4167b.png

6、加载组件
备注:组件调用为模块化

cc656a9d9d6c487694a250391bd2fd5.png

7、在App.vue引入组件

14f7b9384a49eab1e16268e0f4d35a4.png

实现效果:

98d0195ec32a8acff4b2fdc50a46459.png

20be197abd7a25a9757389d099ac672.png

推荐学习:php培训

以上就是vue.js怎么连接数据库的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue.js 数据库
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • vue 3.0全新实战课程(2021版)第一季vue 3.0全新实战课程(2021版)第一季
  • vue 3.0全新实战课程(2021版)第二季vue 3.0全新实战课程(2021版)第二季
  • VuePress: 30分钟制作一个Vue静态网站VuePress: 30分钟制作一个Vue静态网站
  • VuePress: Vue 官方静态网站生成器极速指南VuePress: Vue 官方静态网站生成器极速指南
  • 视频教程分类