新闻资讯

新闻资讯
首页 > 新闻资讯 > 正文内容

可以用手机做网站吗(如何用手机做网站)

时间:2023-11-30 信途科技新闻资讯
今日科技快讯

据外媒报道,在世界各地严格执行“封城”措施,促使远程工作和学习激增后,全球对个人电脑(PC)的需求在2020年第一季度飙升。但这场危机也导致生产和物流问题严重延误,最终导致全球PC出货量同比下降8%,苹果Mac更是狂降21%。

作者简介

本篇文章来自i校长的投稿,分享了他对用Flutter 搭建个人网站的过程,相信会对大家有所帮助!同时也感谢作者贡献的精彩文章。

i校长的博客地址:

https://xintu.jianshu.com/u/77699cd41b28

简述

曾几何时,你有没有一个搭个人网站的冲动,我这个想法在我第一次开始写博客就有了,可就是没有搭起来,直到我看到flutter有了web支持,我就在想,是时候了,必须且一定要做,于是乎我就搭建了现在的网站ibaozi.cn,代码开源至

https://github.com/ibaozi-cn/ibaozi

而这次我要做的并不是基于这个网站开发,我再次申请了一个新域名jetpack.net.cn,读过我之前的博客可能直到,我做了一个Android Jetpack模版项目在线生成工具,我申请这个就是为了将Android Jetpack整合进来,提供一个好记的域名。

当然我还有另一项计划,就是做一个Flutter 生态的Jetpack,这次博客就是计划的第一步,完全开源给大家,让读我博客的同学们,跟我一起搭建一个网站,顺便学习Flutter技术,好了不多说了,接下来,让我们看看如何搭建这个网站。

环境要求

Flutter

需要切换beta版本来支持web开发。环境搭建跳至之前博客:Flutter系列之环境搭建。

https://xintu.jianshu.com/p/ab2bbcdc54d0

Node

下载跳至:下载| Node.js。

https://nodejs.org/zh-cn/download/

环境配置:Node.js 安装配置。

https://xintu.runoob.com/nodejs/nodejs-install-setup.html

脚手架:Express 生成器。

https://expressjs.com/zh-cn/starter/generator.html

具体操作步骤请往下看。

Flutter 项目创建

假装你已经搭建好环境。

step 1

打开终端,切换Flutter 分支。

flutter channel betaflutter upgradeflutter config --enable-webflutter devicesChrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108

一行一行执行命令,最后看到Chrome,祝贺你成功了。

step 2

打开Android Studio。

项目名字、描述简单修改一下,next下一步。

修改一下包名,然后Finish,需要等待一会儿。

项目创建成功了。这里就到这,后期博客慢慢介绍每次开发的细节。

Node 项目创建

我们直接打开Flutter项目的Terminal。

mkdir nodemkdir servercd node/server

进入server目录,现在你的node环境应该也可以了吧,好开始用Express 生成器生成项目。

npm install express-generator -g //安装好了略过express --view=pug myapp

修改myapp为你自己的项目名。执行完你会看到。

接下来:

cd myappnpm inpm start

浏览器试下http://localhost:3000看到如下就ok了。

开始项目关联

step 1

在Flutter项目中执行。

flutter build web

构建web包,最终会在build文件夹下生成web包,web包下就是网站的相关文件。

step 2

copy web包下的文件到node项目的public文件下。

我创建了一个public_flutter_web,为了是以后文件区分,也建议你做一样的操作。

step 3

改造express,因为默认express是展示 views包下的网页的,而且默认不是html实现。将下图中文件全部删除即可。

打开 app.js文件,删除delete标记部分,添加add标记部分:

step 4

保存修改,重新将服务npm start,再打开http://localhost:3000。看到如下:

大功告成,这样就行了吗,nono,对于一个懒惰的人来说,我们要写一些脚本,辅助项目自动构建。

step 5

由于node项目目录太深,在命令行运行也很麻烦,我们写个shell脚本,来帮我搞定。在flutter项目根目录创建bin文件夹,用来放置我们的脚本。

右键New File 命名为 test_start_node.sh,内容如下:

#!/usr/bin/env bashnode node/server/bin/xintu

也很简单。这个脚本就是辅助我们开启node服务。当然我们还会有flutter项

目构建的一些脚本,自动copy文件到指定目录等等,这些之后慢慢补全哦。

最后

资料我已经整理好了,需要的私信我【Flutter】我分享给你!

Flutter精选面试题

Flutter大型项目实战

Flutter核心学习资料大全

将代码上传至github:

https://github.com/ibaozi-cn/flutter-jetpack

最后的最后

登上你的云服务器,通过git 将项目下载到服务器上,这里我们需要工具辅助我们服务部署。我选择pm2+nginx来将我的服务启动起来。

这里不详细说了,网上有一片大海,需要你去浪。有问题的留言我,我可以协助你。最终通过pm2 和 nginx ,项目完美运行。没错你看到的是jetpack.ibaozi.cn,哈哈,域名还没下来,先用了之前的ibaozi.cn,后面我们会迁移到jetpack.net.cn。

扫描二维码推送至手机访问。

版权声明:本文由信途科技转载于网络,如有侵权联系站长删除。

转载请注明出处https://www.xintukeji.cn/xintu/15040.html

相关文章

湘骑士网络营销的简单介绍

2021年骑士网络销售最新招聘求职信息,登录拉勾招聘查看详细的骑士网络销售的岗位职责要求工作内容说明薪资待遇介绍等招聘信息。竞网专注网络营销持续深耕中小企业市场,在成为百度湖南区域总代理的同时,累计为...

潍坊淘宝网络营销,淘宝店网络营销方式

百度贴吧 百度贴吧有一个好处,就是每一个贴吧都有它的主旨,如文玩吧,根雕吧,木材吧,枣木吧等等,在相应的贴吧内,容易聚集相关爱好的吧友,微信,人人网,微博等社交平台 这些平台的人相对比较固定,因为通常...

门店引流推广ppt怎么写(引流软文推广怎么写)

网店没有流量应该是所有做电商运营的小伙伴曾经经历过或者此时此刻正在经历的事,那么我们怎么给店铺快速有效的引流呢?今天小编就分享一些高效技巧给大家。第一:大部分淘宝流量其实都是来自于自然搜索,所以我们必...

包含网络营销商务咨询新报价的词条

记者查询发现,单仁目前为单仁资讯集团董事长,拥有电子商务专家央视财经评论员深圳市文化专家中国电子商务协会网络营销。醇正水乡,旧时江南,小桥流水人家 北京大学电子商务总裁班网络营销专题3月79日首度来袭...

零售业线上推广引流(零售业线上线下融合)

编辑导语:如今,身处中国零售业最强烈的变革期,我们应该思考未来20年后的零售是什么样的,本篇文章作者从不同方面介绍了盒马的运营逻辑和理念,干货满满,一起来学习一下。最近,盒马计划融资了,而过去两三年几...

养鸡网络营销方案,自家散养土鸡的朋友圈

3网络营销渠道综合利用多种电子商务模式,实现网上销售目前的电子商务模式主要有B2BB2C和C2C等三种模式对于秦巴山来。除此之外,他还开起了淘宝店,依靠网络营销,做满减活动等,打开了销路 消费群体的精...

现在,非常期待与您的又一次邂逅

我们努力让每一次邂逅总能超越期待

  • 效果付费
    效果付费

    先出效果再付费

  • 极速交付
    极速交付

    响应速度快,有效节省客户时间

  • 1对1服务
    1对1服务

    专属客服对接咨询

  • 持续更新
    持续更新

    不断升级维护,更好服务用户