这是一个创建于 363 天前的主题，其中的信息可能已经有所发展或是发生改变。
场景：后端老手。正规应用，前端都是有人用。 但偶尔一些应用场景还是需要自己能鼓捣出来页面展示，不能所有的全依赖于前端。 前端目前能力：之前的数十个大小前端项目，vue 项目居多。也就是会看看代码，看看前后交互，改改配置项，编译部署。react nextjs 也有几个项目，修改各类 js 代码可以。紧急情况下，也可以写一些 js 。 前端水平，如果有人把页面搭建搞好了，自己能完成剩下所有事情。 主要困惑：1.css 难读难写。2.如果要设计一个稍微复杂一点的页面，觉得无从下手。 不知是否有一种快速搭建页面的技术存在? 形势所需，自我要求多掌握游一些技能，请各位有类似经验的指点一二，谢谢！
 | 1 ZztGqk 363 天前 css 难读难写：tailwind ？不用的话，用它的文档学 CSS 也不错。 稍微复杂一点的页面：flex 或 grid 嗦到底？不知道这里的复杂是状态复杂、动画复杂还是布局复杂。 快速搭建：ai? v0.dev ? |
 | 2 qviqvi 363 天前 直接用 template engine ，最简单，无需 node 环境，比如 thymeleaf |
 | 3 Xu3Xan89YsA7oP64 363 天前 Cursor 解君愁 |
 | 4 363 天前 @ZztGqk #1 多年后端，写前端遇到的最大的问题就是不会布局，一个单位就搞的自己晕头转向，px, rem, vh ... ，每次写起来都焦头烂额的，感觉现在唯一能写的就是 管理后台了，就这样也是照葫芦画瓢，不过更大的可能是自己太菜了。 |
 | 5 XinPingQiHe OP @ZztGqk tailwind 在一个 nicegui 的项目里 全程用过它，很好。还不知道在 nextjs 或者 vue 里面怎么用它,回头我查查资料 @qviqvi 哦，多年前用过，我原以为这是一种过时的技术，如果现在有新的能用，我也看看 @shizhibuyu2023 AI 编程插件我只用于部分独立的语句。 全局方面 还是想自己先掌握了。 |
 | 6 studyingss 363 天前 我遇到的困惑跟你一模一样，总结出两条重点： 1. 布局 flex 套 flex ，别想别的。 2. css 用 tailwind ，全交给 ai 。 无从下手的问题：选一个抄，直接网页截图发给 chatgpt 让他帮你写好框架，然后用 flex 套 flex 的思路一把梭。 要避坑的点： 太早考虑适配不同尺寸的问题，直接先按自己屏幕大小写死尺寸，写完再慢慢调。 |
 | 7 jlkm2010 363 天前 推荐 vue3 一把梭，或者用 layui |
| 8 XinPingQiHe OP @aababc 可能不是菜 而是思路没跟上前端的思路，管理后台也是后端最需要的 @studyingss 确实是这样的后端困惑，你说的思路我会试试 @jlkm2010 知道这个好，就还是不知道怎么梭 vue3 技术栈先后看了不少 改写一点东西基本能搞定，要开个新项目或搭建歌新页面 就呆住了。 |
| 9 studyingss 363 天前 @XinPingQiHe 骨架让 ai 帮忙写没问题的，不用担心 ai 让你掌握不了细节，你可以这么用：先让他给你生成一个参考，然后你基于它的一点一点，我刚开始就是这样，改到最后跟它生成的一点关系都没有了，但起码会有个着手点，不至于抓瞎。 另外我个人觉得，vue 比较好入门，它整套都是定好的，更容易集中注意力在重点上，react 太灵活，初学很容易纠结在一些无关紧要的小事情上。 |
 | 10 taotaodaddy 363 天前 投 tailwind 一票 |
 | 11 cmdOptionKana 363 天前  2 > 如果要设计一个稍微复杂一点的页面，觉得无从下手 如果不打算花很多时间精力做前端，其实还不如不做复杂的页面，就做简单的。其实复杂也没啥好处，很多设计都是过度设计。 另外，可以先做一个最最最简单的页面，再慢慢改复杂。不要一开始就做复杂。 |
 | 12 captain55 363 天前 1 难道我真的老了吗？竟然没看到 #Bootstrap |
 | 13 taogen 363 天前 1 1. CSS 基础书籍学起来啊。 2. 复杂的页面，也是一点一点堆起来的。先布局，调样式，加特效等等。不懂的 CSS 搜一下。 我看你基础太弱了。系统的学下 CSS 和 Javascript 吧！别上来就框架。 |
| 14 XinPingQiHe OP |
 | 15 yinmin 363 天前 via iPhone css 不难，快速上手的方式是买一本 css 的书，花个 3-5 天时间通读一遍，遇到问题向 gpt 请教。对于编程老手，估摸着也就 1 周时间能基本精通了 |
 | 17 0xD800 362 天前 对前端感觉复杂会不会是因为你布局系统没掌握，直接学习 flex ，position 的使用，可以实现 99%的界面，js 的话是编程语言学起来简单 |
| 18 0xD800 362 天前 可以自己思考实现一个后台管理的骨架出来，做完基本掌握前端的布局了 0.0 |
 | 19 byj66 362 天前 via iPhone CSS 一个难点在有很多属性要记。多看几本书，MDN 经常看看。 一些参考资料 1. MDN - https://developer.mozilla.org/en-US/docs/Web/CSS 2. CSS roadmap - https://roadmap.sh/r/css-6nqag 3. 深入研究 CSS 的英文博主： https://ishadeed.com/ |
 | 20 vkZudze5p1h4py5H 362 天前 看你后端语言啊，我主要用 laravel ，基于后端的全栈技术很完善，不需要学太多前端的东西了。 |
 | 21 zy0829 362 天前 别学 |
 | 22 ma836323493 362 天前 最近学前端做了个服务号， 用 padding 用的真爽 |
 | 23 qweruiop 362 天前 @studyingss 哈哈，一样的，现在基本上都是 flex 套 flex+tailwind ，再复杂点的页面，就花几十块钱，淘宝让 人工 gpt 上了。。。 |
 | 24 cnhongwei 362 天前 2 后端能写好的人，前端是没有问题的，你把前端页面划分为几个层次，层->块-元素 层是指你的页面中会有多少层，主要是对话框，遮罩层，这些层在什么什么时候显示隐藏。 块就是把每个页面按功能分多少块，如果在页面宽度或内容多少发生变化的时候，每个块的大小如何发生变化，使用 flex 布局很简单，只通过 padding 或 marging 来间隔块就行了，如果还复杂，就多套一个 div 。 元素就是 html 元素，你使用合适的元素和事件就行了。 使用现在的框架来组合上面说的就行了，现在基本没有框架完不成，需求直接手搓 css 的了。 |
 | 25 luojianxhlxt 362 天前 C#准备研究一下 Blazor ，不过也只能跳过 js html 和 css 还是跳不过 |
 | 26 guanzhangzhang 362 天前 @cnhongwei 层是怎么体现的，也是 div 和全局 className 实现吗 |
| 27 XinPingQiHe OP 谢谢各位的建议，用新思维，再挑战一下自己 |
 | 28 leaveeel 362 天前 @guanzhangzhang 层是指 position 产生的 z 轴，正常布局都在同一层，层互相独立。块就是 y 轴自动向下沿伸，块互相独立。元素是块里的 x ，水平排列会换行。然后整个页面就是坐标系的俯视图。也有属性可以改他们的相对关系，比如 transform 、float ，想进一步了解需要看文档+多用 |
 | 29 shuyunquan 362 天前 1. 好多朋友讲的很对，css 必须要掌握 flex 布局，grid 布局 这俩会了你发现写页面布局很简单 2. 但是非常复杂的页面，用这俩写 css 就感觉很嗦，很繁琐， 这个时候就可以使用 tailwinds, 可以省去写大量 css 的时间 3. 复杂的页面可以想想能不能用 vue 的组件思想，搞些组件复用 4. 如果是 ERP 这种项目，那有些页面确实很复杂，也不好组件复用， 就复制粘贴呗，反正大部分都是列表的增删改查，小部分复杂的就让前端同事处理 |
 | 30 Ayanokouji 362 天前 1 如果只做 web 端，真心觉得 htmx 很棒。如果要支持多端，还是前后端分离吧，用 react/vue/ng 。 |
 | 31 svtter 362 天前 via Android nextjs 加上 tailwind ，大概学一周，就能做挺好的东西了。贴一下自己的水文： https://svtter.github.io/post/2024-03-12-react-for-old-django/ |
 | 32 lancelock 362 天前 页面设计是 ui 的活吧，前端也没几个会设计的 |
 | 33 shadowyue 362 天前 管什么前端后端，不都是搞开发，抽时间选一个主流框架学就行了 |
| 34 GBdG6clg2Jy17ua5 362 天前 作为一个后端，觉得前端的难点主要在以下方面： 1.布局难搞，没法随心所欲的安放元素位置。 2.效果不会实现 目前我得解决方法就是，尽量用 ui 库。像 elementui,vant 啥的。没有这些东西，我一个功能都实现不了 |
 | 35 layxy 362 天前 可以稍微学习一下,而且后端搞前端基本都是用的现成的 ui 库,自己稍微调整下排版就可以,复杂组件就只能甩给前端了 |
| 36 guanzhangzhang 362 天前 @svtter 你文章里的 next.js 没提到需要学哪些基础内容，还是不用管直接写吗 |
| 37 svtter 362 天前 @guanzhangzhang 建议是读官方的 tutorial 。读不下去就直接跟着感觉写（说出这句话感觉自己相当不专业）。 |
 | 38 XuHuan1025 362 天前 我感觉挺简单... 我直接 gpt 直接整个页面就有了 |
 | 39 learnshare 362 天前 动手写 CSS 之前，应该先熟练使用现代化的 UI 设计工具（比如 Sketch/Figma 等） CSS 是一种通过代码绘制 UI 的工具，与设计工具里的布局、图层、组件化等概念基本一致 |
| 40 svtter 362 天前 @learnshare 请教一下，css 哪里体现了图层？ |
 | 41 ccpp132 362 天前 建议套现成的组件库就行了 |
| 42 learnshare 362 天前 |
 | 43 jones2000 362 天前 某宝或海鲜市场，找个前端搞一个毛胚的。每个人的精力是有限的，做好，做精自己的核心模块， 其他都交给互联网。什么都自己搞，多麻烦，关键还都不是自研的，大都是用第 3 方的插件，学这些基本就是浪费时间。 |
 | 44 visper 362 天前 css 最主要是布局。去上网查一下各种 css 布局的方式。然后 margin padding 类的基本属性看看就知道了。可以直接叫 AI 写。 现在基本不需要支持 ie 了还好点。否则都要考虑一下这个 css 属性是否支持 IE. 甚至以前哪个版本的 ie 支持哪些属性。 |
| 46 XinPingQiHe OP ## 看到这么多人收藏了此主题。我有必要做一个后续汇报 ** 最后选择方案：vue3 + naive-ui ,借助 vue 和 naive 的官方文档 + gemini 提问 ** 时间：从开始做这事到上线，刚好 10 天。 所实现的功能 比较简单 就是登录+7 个页面，展示一些统计信息，只有两个页面涉及到了栏目较多的表单录入操作，其它页面都是查询展示为主。 ## 后续关注，移动端的页面、比较大型的前端项目、非管理面板的其它项目。 最后，再谢谢各位，给我提供了足够的信息和信心 |
Select Language