想借由开发一个简单的 web app 来熟悉 Vue,不知道从何处入手,望老手不吝赐教

2022-05-02 16:03:02 +08:00
 macid

刚开始接触 web app 的开发,手头上刚好有一个管理系统的后台。该后台已经提供了一套 XML API 。

我的需求是开发一个 web app 。这个 app 通过与管理系统后台的数据交换,可以实现:向用户展示一组“控件”(控件所需要展示的信息来源于对后台的 POST 请求);用户与控件进行交互,把更新的状态信息又反馈给后台(依旧是通过 POST 请求)。

我的问题是,这个 web app 完全用 Vue 就可以实现了吗?还需要涉及 backend 的开发吗?前端页面按说也需要有自己的状态信息需要管理吧。最近刚开始接触 Vue ,了解到 reactivity 的概念,感觉似乎很对路:通过页面操纵数据,数据的变化又能立即在页面上反映出来。

初次接触 web app 开发,手边资料很丰富,但不知道从何处入手,希望经验丰富者指点一下努力的方向,多谢!

3354 次点击
所在节点    Vue.js
12 条回复
zcf0508
2022-05-02 17:00:27 +08:00
可以先看 vue 的官方文档,还是比较好入门的。

我个人推荐先考虑你的页面设计,看下后端提供的接口是否满足你的使用,因为页面数据展示和后端提供的数据可以有出入。有了页面设计之后可以先实现页面的设计,用 html 和 css 或者直接用现成的 UI 框架,把界面搭起来,然后再利用 vue 来控制页面数据的展示。

可以去找个 github 搜关键字 vue admin 之类的看看项目。
vacker
2022-05-02 17:33:08 +08:00
刚开源了一个 vue 做的项目 https://www.v2ex.com/t/850391 希望对你有帮助
SuperMild
2022-05-02 17:56:18 +08:00
> 这个 app 通过与管理系统后台的数据交换

这个管理系统后台是已经有了吗,它提供 http api 吗?
macid
2022-05-02 18:32:55 +08:00
@SuperMild 本身这套系统自带有完整的后台和前端。然后,也提供了 http api 。对它的所有的查询或操作都能通过 api 完成。我现在要做的,是按照自己的操作习惯,利用 api 重新设计一个前端。但我有点不太明白的是,我打算开发的这个 web app ,应该还是得有自己的后端吧。因为按照我的理解,这里面可能涉及到跨域( web app 可能和系统没法部署在一台主机上,而且,系统我也没办法更改),前端页面上的 js 可能没法直接发出 http 请求。
macid
2022-05-02 18:35:27 +08:00
@zcf0508 非常感谢。正在了解 vue-admin-template ,还有 Arco Design Vue ,Naive UI 。
narmgalaxy
2022-05-02 20:36:19 +08:00
先做一个 todo 应用吧.这个用来入门是挺好的
skys215
2022-05-02 22:20:43 +08:00
dayeye2006199
2022-05-03 01:27:08 +08:00
@macid 如果你已经有现成的 API 后端,你的前端 app 就是纯 JS 。通过 JS 向后端发出各种 HTTP 请求,完成各种操作。收到的数据,用 JS 渲染成 HTML 。

跨域配置完全可以在后端完成,你只要在已有的后端里面配置允许你的新前端部署的 URL 访问就可以了。

我猜 LZ 应该是有不少使用模板引擎做 web 的经验。前后端不分离就是后端在服务器端直接返回 HTML 给用户;前后端分离就是后端只负责接受和返回数据给前端,前端收到数据之后只负责展示成 HTML 和发送进一步的请求给后端。
RedBeanIce
2022-05-03 01:34:44 +08:00
写 vue 前,我真的建议先学一下 javascript 或者 typescript ,花费时间大概在一周(假设你是有编程基础的情况下)

如果上来就写 vue ,你会看不明白的。
tedding
2022-05-03 19:39:55 +08:00
9#说得很中肯 …… 以及 我更推荐你去用 angular 而不是其他两个
matthewzhong
2022-05-04 09:02:28 +08:00
以前有个师兄教我,不管学什么都可以从做一个博客开始。你可以用 vue+markdown 写一个博客程序
yoghurtoreo
2022-05-04 11:28:03 +08:00
一个基于 Vue3 & Vite2 & Vuetify 3-Beta & Lean Cloud 的记账类练手小玩具,大佬可以来看看: https://github.com/boring-plans/boring-days

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/850517

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX