站长工具

Vite-WeGPT聊天AI实例|vue3+pinia仿ChatGPT聊天界面

作者：xiaoyan2017

基于vue3.x+vite4+pinia2仿chatgpt聊天模拟实例Vue3-WeGPT。

基于Vite4.x+Vue3+Pinia2+VEPlus+Vue3-Markdown等技术实现仿ChatGPT聊天AI界面实例。整体界面简洁清新、支持2种界面布局、暗黑+亮色模式、全屏+半屏展示、Markdown语法解析、侧边栏收缩等功能。

使用技术

  • 编辑器：cursor
  • 框架技术：vue3+vite4.x+pinia2
  • 组件库：veplus (基于vue3桌面端组件库)
  • 国际化方案：vue-i18n^9.2.2
  • 代码高亮：highlight.js^11.7.0
  • 本地存储：pinia-plugin-persistedstate^3.1.0
  • markdown解析：vue3-markdown-it
  • 样式处理：sass^1.62.0

特征

  • 最新前端技术栈 vite4、vue3、pinia2、vue-router、vue-i18n
  • 支持中文/英文/繁体多语言
  • 支持dark/light两种模式
  • 提供2种模板布局
  • 支持半屏/全屏展示
  • 支持更换背景皮肤
  • 搭配轻量级vue3组件库ve-plus

项目结构

整个项目采用vite4.x搭建项目，vue3 setup语法编码，运行编译速度极快。

Vue3组件库

项目依然采用自己开发的vue3自定义UI组件库VE-Plus。提供40+常用组件，运行轻巧、风格清新。

安装使用

yarn add ve-plus
npm install ve-plus -S
cnpm install ve-plus -S

http://www.cnblogs.com/xiaoyan2017/p/17170454.html

布局模板

提供了经典+分栏两种布局展示模板。

<script setup>
    import { computed } from 'vue'
    import { appStore } from '@/store/modules/app'

    // 引入布局模板
    import Classic from './layout/classic/index.vue'
    import Columns from './layout/columns/index.vue'

    const store = appStore()
    const config = computed(() => store.config)

    const LayoutConfig = {
        classic: Classic,
        columns: Columns
    }
</script>

<template>
    <div class="vegpt__container" :class="{'is-half': store.config.halfScreen}" :style="{'--themeSkin': store.config.skin}">
        <component :is="LayoutConfig[config.layout]" />
    </div>
</template>

<style lang="scss" scoped></style>
<div class="ve__layout-body flex1 flexbox">
    <!-- //中间栏 -->
    <div class="ve__layout-menus flexbox" :class="{'hidden': store.config.collapse}">
        <aside class="ve__layout-aside flexbox flex-col">
            <ChatNew />
            <Scrollbar class="flex1" autohide size="4" gap="1">
                <ChatList />
            </Scrollbar>
            <ExtraLink />
            <Collapse />
        </aside>
    </div>

    <!-- //右边栏 -->
    <div class="ve__layout-main flex1 flexbox flex-col">
        <!-- 主内容区 -->
        <Main />
    </div>
</div>

vite.config.js配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { parseEnv } from './src/utils/env'

// http://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const viteEnv = loadEnv(mode, process.cwd())
    const env = parseEnv(viteEnv)

    return {
        plugins: [vue()],

        // base: '/',
        // mode: 'development', // development|production

        /*构建选项*/
        build: {
            // minify: 'esbuild', // 打包方式 esbuild(打包快)|terser
            // chunkSizeWarningLimit: 2000, // 打包大小警告
            // rollupOptions: {
            //     output: {
            //         chunkFileNames: 'assets/js/[name]-[hash].js',
            //         entryFileNames: 'assets/js/[name]-[hash].js',
            //         assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
            //     }
            // }
        },
        esbuild: {
            // 打包去除 console.log 和 debugger
            drop: env.VITE_DROP_CONSOLE ? ['console', 'debugger'] : []
        },

        /*开发服务器选项*/
        server: {
            // 端口
            port: env.VITE_PORT,
            // 是否浏览器自动打开
            open: env.VITE_OPEN,
            // 开启http
            http: env.VITE_HTTPS,
            // 代理配置
            proxy: {
                // ...
            }
        },

        resolve: {
            // 设置别名
            alias: {
                '@': resolve(__dirname, 'src'),
                '@assets': resolve(__dirname, 'src/assets'),
                '@components': resolve(__dirname, 'src/components'),
                '@views': resolve(__dirname, 'src/views'),
                // 解决vue-i18n警告提示：You are running the esm-bundler build of vue-i18n.
                'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
            }
        }
    }
})

Vue3主入口文件

在main.js引入路由、Pinia状态管理及注册一些公共组件。

import { createApp } from 'vue'
import App from './App.vue'

// 引入Router和Store
import Router from './router'
import Store from './store'

// 引入插件配置
import Plugins from './plugins'

const app = createApp(App)
app
.use(Router)
.use(Store)
.use(Plugins)
.mount('#app')

chatgpt聊天框

聊天框使用Input组件实现，设置type=textarea，支持多行自适应高度。

<template>
    <div class="vegpt__editor">
        <div class="vegpt__editor-inner">
            <Flex :gap="0">
                <Popover placement="top" trigger="click" width="150">
                    <Button class="btn" type="link" icon="ve-icon-yuyin1" v-tooltip="{content: '发送语音', theme: 'light', arrow: false}"></Button>
                    <template #content>
                        <div class="flexbox flex-alignc flex-col" style="padding: 15px 0;">
                            <Icon name="ve-icon-yuyin" size="40" color="#0fa27e" />
                            <p class="fs-12 mb-15 c-999">网络不给力</p>
                            <Button size="small"><i class="dot"></i>开始讲话</Button>
                        </div>
                    </template>
                </Popover>
                <Button class="btn" type="link" v-tooltip="{content: '发送图片', theme: 'light', arrow: false}">
                    <Icon name="ve-icon-photo" size="16" cursor />
                    <input ref="uploadImgRef" type="file" title="" accept="image/*" @change="handleUploadImage" />
                </Button>
                <Input
                    class="flex1"
                    ref="editorRef"
                    v-model="editorText"
                    type="textarea"
                    :autosize="{maxRows: 4}"
                    clearable
                    placeholder="Prompt..."
                    @keydown="handleKeydown"
                    @clear="handleClear"
                    style="margin: 0 5px;"
                />
                <Button class="btn" type="link" icon="ve-icon-submit" @click="handleSubmit"></Button>
            </Flex>
        </div>
    </div>
</template>
<script setup>
    import { ref, watch } from 'vue'
    import { guid } from '@/utils'
    import { chatStore } from '@/store/modules/chat'

    const props = defineProps({
        value: { type: [String, Number] }
    })
    const emit = defineEmits(['clear'])

    const chatState = chatStore()
    
    const uploadImgRef = ref()
    const editorRef = ref()
    const editorText = ref(props.value)

    // ...

    // 发送会话
    const handleSubmit = () => {
        editorRef.value.focus()
        if(!editorText.value) return

        let data = {
            type: 'text',
            role: 'User',
            key: guid(),
            content: editorText.value
        }
        chatState.addSession(data)
        // 清空
        editorText.value = ''
    }
    const handleKeydown = (e) => {
        // ctrl+enter
        if(e.ctrlKey && e.keyCode == 13) {
            handleSubmit()
        }
    }

    // 选择图片
    const handleUploadImage = () => {
        let file = uploadImgRef.value.files[0]
        if(!file) return
        let size = Math.floor(file.size / 1024)
        console.log(size)
        if(size > 2*1024) {
            Message.danger('图片大小不能超过2M')
            uploadImgRef.value.value = ''
            return false
        }
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function() {
            let img = this.result

            let data = {
                type: 'image',
                role: 'User',
                key: guid(),
                content: img
            }
            chatState.addSession(data)
        }
    }

    // ...
</script>

vue3项目现在比较推荐pinia替代vuex进行状态管理。使用 pinia 和 pinia-plugin-persistedstate 看看本地存储。

import { createPinia } from 'pinia'
// 引入pinia本地持久化存储
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

/**
 * 聊天状态管理
 * @author YXY  Q：282310962
 */

import { defineStore } from 'pinia'
import { guid, isEmpty } from '@/utils'

export const chatStore = defineStore('chat', {
    state: () => ({
        // 聊天会话记录
        sessionId: '',
        session: []
    }),
    getters: {},
    actions: {
        // 创建新会话
        createSession(ssid) {
            this.sessionId = ssid
            this.session.push({
                sessionId: ssid,
                title: '',
                data: []
            })
        },

        // 新增会话
        addSession(message) {
            // 判断当前会话uuid是否存在，不存在创建新会话
            if(!this.sessionId) {
                const ssid = guid()
                this.createSession(ssid)
            }
            this.session.map(item => {
                if(item.sessionId == this.sessionId) {
                    if(!item.title) {
                        item.title = message.content
                    }
                    item.data.push(message)
                }
            })
            // ...
        },

        // 获取会话
        getSession() {
            return this.session.find(item => item.sessionId == this.sessionId)
        },

        // 移除会话
        removeSession(ssid) {
            const index = this.session.findIndex(item => item?.sessionId === ssid)
            if(index > -1) {
                this.session.splice(index, 1)
            }
            this.sessionId = ''
        },
        // 删除某一条会话
        deleteSession(ssid) {
            // ...
        },

        // 清空会话
        clearSession() {
            this.session = []
            this.sessionId = ''
        }
    },
    // 本地持久化存储(默认存储localStorage)
    persist: true
    /* persist: {
        // key: 'chatStore', // 不设置则是默认app
        storage: localStorage,
        paths: ['aa', 'bb'] // 设置缓存键
    } */
})

OK，以上就是vue3.x开发仿制ChatGPT聊天功能的介绍，希望大家喜欢~~?

最后附上一个Vite+Electron桌面MacUI实例

http://www.cnblogs.com/xiaoyan2017/p/14926338.html

 

本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310）
本文转载于网络 如有侵权请联系删除

相关文章

  • HDU 1069 Monkey and Banana

    大家好，又见面了，我是全栈君，祝每个程序员都可以多学几门语言。题意：给你一个数n，接下来给你一个矩形体的3边长（即随便你怎么放它，它的高度有可能是3边中的一条边），如今要你求出这n个矩形体能堆成一座塔的最高高度（塔就是面积从店面開始向上严格递增）思路：动规里的最长子序列的变形，结合了贪心的思想。首先我们须要对你所用的高进行排序，排序之后找出最严格递减的面积就能够了AC代码：#include<iostream> #include<cstdio> #include<algorithm> #include<cstring> usingnamespacestd; structnode { intl,w,h; }box[111]; intdp[111]; boolcmp(nodea,nodeb) { if(a.l>b.l)returntrue; if(a.l==b.l&&a.w>b.w)returntrue; returnfalse; } intmain() { intd[3],n,i,j,c=1,k,sumh; wh

  • 唯品会“特卖”的生意不再好做？

    配图来自Canva可画经过多年的发展，国内的电商格局已经基本趋于稳定。淘宝、京东、拼多多凭借其综合类的优势，占据了绝大部分的市场份额，其它市场则由以苏宁易购、唯品会等为代表的中小型垂直类电商平台分食。而在厮杀激烈的电商江湖中，能持续盈利的电商平台则少之又少。大多垂直电商比如蘑菇街、当当等更是由于自身单一品类的局限性，而陷入了增长困境。不过，在众多垂直电商平台中，连续34个季度实现盈利的唯品会，则成为了这其中的“极少数”。而作为能保持长期盈利的电商之一，唯品会的“增长秘诀”更是引起了外界的强烈好奇。营收净利双增长近日，唯品会发布了2021年第一季度财报。财报显示，该季度唯品会实现总营收284亿元，同比增长51.1%；净利润15亿元，同比增长125.7%；实现毛利润56亿元，同比增长54.7%；毛利率为19.7%，同比提升了0.5个百分点。唯品会该季度的营收和利润能拥有如此稳健的增长之势，主要是得益于其活跃用户、GMV及订单数的强劲增长。据财报数据显示，该季度唯品会总活跃用户数为4580万人，同比增长54%；超级VIP用户数达489.1万人，同比增长37%；GMV实现461亿，同比增加60

  • Saltstack_使用指南02_远程执行-验证 2.1. Master与哪些minion正常通信2.2. 查看master与指定minion通信是否正常

    1.主机规划2.Master与哪些minion通信2.1.Master与哪些minion正常通信1[root@salt100~]#salt'*'test.ping 2salt100: 3True 4salt01: 5True 6salt02: 7True 8salt03: 9True复制2.2.查看master与指定minion通信是否正常比如指定salt011[root@salt100~]#salt'salt01'test.ping 2salt01: 3True复制3.远程执行示例11[root@salt100~]#salt'*'cmd.run'w' 2salt01: 322:55:08up2:32,1user,loadaverage:0.00,0.01,0.05 4USERTTYFROMLOGIN@IDLEJCPUPCPUWHAT 5yunpts/010.0.0.120:231:19m0.27s0.09ssshd:yun[priv] 6salt100: 722:55:08up2:33,1user,loa

  • 【Python】Numpy使用指南

    Numpy介绍：Numpy是用来存储和处理大型矩阵，比Python自身的嵌套列表结构要高效的多，本身是由C语言开发。这个是很基础的扩展，其余的扩展都是以此为基础。Numpy常用操作定义矩阵变量并输出变量的一些属性：#-*-coding:utf-8-*- importnumpyasnp #用np.array()生成矩阵 arr=np.array([[1,2,3], [4,5,6]]) print(arr) print('numberofarrdimensions:',arr.ndim) print('~~~shape:',arr.shape) print('~~~size:',arr.size) #输出结果： [[123] [456]] numberofarrdimensions:2 ~~~shape:(2,3) ~~~size:6复制定义一些特殊矩阵#指定矩阵数据类型 arr=np.array([[1,2,3], [4,5,6]], dtype=np.float64)#我的电脑np.int是int32，还可以使用np.in

  • The Clean Architecture in PHP 读书笔记(一)

    本书的目的是解决如何构建一个中大型应用，并且满足：可测性可重构易处理易维护而对小的应用，不适合本书的原则，本书在组织上按照：先介绍平时写PHP代码遇到的共性问题，然后给出为什么good,solid,cleancode是对于应用的健壮和可维护非常重要接着介绍了一些原则和设计模式最后使用这些原则，介绍了CleanArchitecture先介绍第一部分：TheProblemWithCodeWritingGoodCodeisHardIfitwereeasy,everyonewouldbedoingit 框架是非常好的，可以帮助我们快速的开发，但是前期的学习成本往往很高，特别是如果想要深入理解框架，需要花费大量的经历。框架的选择上也非常有讲究，每年都有新的框架产生、消亡，我们要选择那些文档好的，活力好的框架，并且框架不应该限制的应用太死，这样我们的应用能快速的从一个框架切换到另一个框架。另一个重要的议题是：库函数的使用。composer和packagist的出现，让我们能更方便的使用各种各样的库和函数，但是使用库同样也会和框架一个问题，当库做升级和废弃的时候，我们需要花费精力去迁移、升级库函数。

  • 如何在服务器上安装LAMP

    介绍LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写：Linux，操作系统Apache，网页服务器MariaDB或MySQL，数据库管理系统（或者数据库服务器）PHP、Perl或Python，脚本语言在本教程中，我们将在Ubuntu上安装LAMP。Ubuntu将满足我们的第一个要求：Linux操作系统。没有服务器的同学可以在这里购买，不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后在购买服务器。第一步：在防火墙中安装ApacheApacheWeb服务器是世界上最受欢迎的Web服务器之一。它已在网络发展的大部分历史中被广泛使用，这使其成为托管网站的绝佳选择。我们可以使用Ubuntu的管理器apt轻松安装Apache。包管理器允许我们从Ubuntu存储库中安装大多数软件。我们可以通过输入以下命令开始：sudoapt-getupdate sudoapt-getinstallapache2复制由于我们使用的是sudo命令，因此这些操作将以root权限执行。它将询问您的常规用户密码以验证您的目的。输入密码后，apt将告诉您计划安装哪些软件包以及它们将

  • CentOS系统自动下载RPM包及其所有依赖的包

    前几天我尝试去创建一个仅包含我们经常在CentOS7下使用的软件的本地仓库。当然，我们可以使用curl或者wget下载任何软件包，然而这些命令并不能下载要求的依赖软件包。你必须去花一些时间而且手动的去寻找和下载被安装的软件所依赖的软件包。然而，我们并不是必须这样。在这个简短的教程中，我将会带领你以两种方式下载软件包及其所有依赖包。我已经在CentOS7下进行了测试，不过这些相同的步骤或许在其他基于RPM管理系统的发行版上也可以工作，例如RHEL，Fedora和ScientificLinux。方法1利用"Downloadonly"插件下载RPM软件包及其所有依赖包我们可以通过yum命令的“Downloadonly”插件下载RPM软件包及其所有依赖包, 为了安装Downloadonly插件，以root身份运行以下命令：yuminstallyum-plugin-downloadonly　　复制现在，运行以下命令去下载一个RPM软件包yuminstall--downloadonly<package-name>复制默认情况下，这个命令将会下载并把软件包保存到 /v

  • 在大数据下，微信眼中的你是什么身份？

    想知道微信眼中的你是什么身份吗？2015年1月，第一批朋友圈广告上线，有网友大呼受到微信的“不公正待遇”，第一批广告投放品牌为“宝马中国”、“vivo”智能手机、“可口可乐”，有人认为收到宝马广告的标签是“精英阶层”，收到可口可乐广告的是“屌丝阶层”。其实不然，请看微信如何定位你的身份！截止至2016年12月，微信拥有全球共计8.89亿月活跃用户，如此庞大的用户群体，精准的定位是有效广告的保障。首先微信是也是腾讯旗下的，微信的数据源会和QQ用户数据源交叉匹配，微信本身的数据源包括关注的微信公众号、阅读的公众号文章、朋友圈分享的信息等；QQ数据源包括QQ、QQ空间、QQ浏览器等，而且也会对应用宝用户进行匹配。QQ运行17年的用户和多软件多平台的数据分析，从横向范围和纵向时间深度分析，通过多方位的信息还原一个用户“画像”。所有的广告主都想将自己的广告发给准确的目标用户，所以投放人群对投放效果的影响很大。朋友圈广告可以对投放人群进行精准定位，人群筛选基本可以分为4大类：基本属性、兴趣爱好、用户状态、用户环境。基本属性1、地域划分规则是根据三个月内用户你活跃的位置进行定位，定位方式有很多，通过

  • 这真是看脸的时代！刷脸购物！

    纳尼，刷脸购物！刷脸支付！树树对着镜子，我长一部外星的脸，是不是可以免单的呢！随着微信支付的广泛应用和小程序的持续发展，腾讯从线下切入商家服务更加得心应手。12月25日，微信支付、腾讯社交广告联合绫致集团旗下品牌Jack&Jones在深圳九方广场开设第一家人脸识别智慧时尚体验店，同日上线的还有广州白云万达广场的VEROMODA智慧时尚体验店。此次的智慧零售体验方案，“腾讯社交广告”发挥了重要作用。传统的线下店面都是通过“进店——人工导购——收银台支付”来完成购物。而品叔在体验了Jack&Jones的“智慧时尚体验店”后发现，智慧零售店整个购买过程简洁而快速：1）进入Jack&Jones的智慧时尚店后，通过“智慧试衣间”屏幕进行“刷脸”；2）关注专属小程序绑定成为品牌会员，开通微信免密支付，正式体验人脸识别支付功能；3）成为会员后，在智慧试衣间前再次“刷脸”，收到个性化的时尚服饰搭配推荐；4）滑动“智慧试衣间”屏幕，选好适合自己的服饰后，一键呼叫导购进行试穿；5）结账时，在人脸识别会员收银台上，再次刷脸认证身份，并进行微信支付。顾客可以不用手机，仅需面部识别认证即

  • Java程序员的日常 —— 工作一天的收获

    看题目可能是扯皮，其实还是有很多专业知识的。从最开始没有注意到设计原则，到后面的jquery实战技巧，都是今天一天碰到的问题。 每天整理一点点，每天收获一点点。 关于软件设计在设计系统结构的时候，一些软件设计方法，还是很重要的。比如开闭原则，开闭原则就是：对扩展是开放的对修改是关闭的要做到上面两点，就需要在设计应用架构时，理清核心的需求点。完成一个解决问题需求的最小的、最核心的设计结构。其他的业务逻辑或者应用需求，应该都是基于这个核心结构进行扩展。再来说说软件设计的6大原则：开闭原则：即扩展式开放的；修改是关闭的。单一职责原则：避免职责扩散，每个类都应该仅完成一个功能里氏代换原则：子类可以扩展父类的功能，但是不能改变父类原有的功能依赖倒置原则：解耦高层次与低层次实现的关系，采用接口之类的方法进行解耦接口隔离原则：客户端不应该实现不需要的接口方法迪米特法则：对象之间尽量保持最少的依赖关系这几种法则，还得慢慢悟啊~关于Java在Java类中获取当前CLASS的路径背景核心包依赖于一个service,我通过Spring的方法获取到Springmvc中的上下文，然后拿到bean。publicc

  • 素数定理整合_素数定理简单证明

    大家好，又见面了，我是你们的朋友全栈君。埃拉托色尼筛法基本素数判别法：正整数n是素数，当且仅当他不能被任何一个小于sqrt(n) 的素数整除定理：如果m是一个合数，那么n一定有一个不超过sqrt(n)的素因子推论：如果n是一个合数，那么n必有小于等于sqrt(n)的素因子6N+1法任何数都可以构造成6N+1,6N+2,6N+3,6N+4,6N+5 只有形如：6N+1和6N+5有可能是素数，其中2，3是特殊的constintmaxn=1000000; intprime[maxn],nprime=0; boolIsprime(intx) { if(x%2==0) returnfalse; for(inti=3;i*i<=x;i+=2) if(!(x%i)) returnfalse; returntrue; } voiddoprime() { prime[nprime++]=2; prime[nprime++]=3; for(inti=6;i<=maxn;i+=6) for(intj=-1;j<=1;j+=2) if(Isprime(

  • 关于Spring事务嵌套回滚的一些测试总结（精简）

  • js去掉html标签和去掉字符串文本的所有的空格

    去掉html标签的js     <script> functiondelHtmlTag(str){  returnstr.replace(/<[^>]+>/g,"");//去掉所有的html标记 }varstr="<spanstyle='display:none;'>Thisistest</span><imgsrc=''>ss</img><strong></strong><br/>";str=delHtmlTag(str);alert(str);</script> 为了一个title去html标签所做的修改： functiondelHtmlTag(str,obj){  vartitle=str.replace(/<[^>]+>/g,"");//去掉所有的html标记 if(title.length>300){  title=tit

  • UE4命令行参数解析

    转自：https://blog.csdn.net/u012999985/article/details/53544389 一.命令行参数简述命令行参数是一连串的关键字字符串，当运行可执行文件时可以通过命令行或者可执行文件的快捷方式将其传入。它们的目的是自定义引擎运行的方式，以便符合开发人员或用户的需要。一般用途如下，注：命令行不区分大小写 第一，这可以使得运行编辑器而不运行游戏变得很简单（只要加上几个字符即可，见图1-1）。第二，可以更方便的配置客户端IP，服务器以及其他更丰富的运行信息。第三，它也可以更加复杂。玩家可以自定义命令行参数，并在代码中解析与使用，比如使用某个特定的地图在指定的分辨率和帧频率下启动游戏。图1-1是4个bat批处理文件，用来打开不同的游戏端（编辑器，本地游戏，游戏客户端以及专有服务器），游戏工程名后面的都是命令行参数。我们也可以直接在程序的快捷方式里面添加，如图1-2。  图1-1通过Bat文件打开不同游戏端的命令行参数  图1-2在快捷方式里传入命令行参数 总体上来说，命令行参数其实分为两类，一类是UE4引擎提供的参数，比如配置地图名称

  • 微信小程序 谈谈在大学初次写项目的体验

    说明：笔者重新规划了博客方向，想更详细的讲解微信小程序的所有技术内容，本文于2020年5月24日已做修改。 同时笔者也欢迎一起合作共赢，愿意写杂志，写书，贡献自己的一份微薄之力！ 作为第零篇的讲解，本文主要谈谈在大学初次写项目的体验 原文链接https://blog.csdn.net/qq_41464123/article/details/104982019，转载请带上本段内容，谢谢配合。   已经近三周没写博客了，最近一直在忙着写一个项目，趁现在项目所用的服务器申请还在审核备案，写一篇博客，谈谈我在大学第一次写正规付费项目的体验哈哈。   一：写项目的前提  1.有良好的java基础   一般来说，写项目都是在大三才开始的，大一大二都是在打基础，那些基础课程，比如专业课《C语言程序设计》、《C++程序设计》、《JAVA程序设计》、《数据结构》、《网页制作技术》、《数据库基础》、《移动应用开发》（Android开发），甚至是《办公自动化》；公共课比如《高等数学》、《离散数学》、《线性代数》......   不说别

  • 深入拆解Java虚拟机(二)Java虚拟机是如何加载Java类的?

    　　Java语言的类型可以分为两大类：基本类型（primitivetypes）和引用类型（referencetypes），Java的基本类型，它们是由Java虚拟机预先定义好的。 　　至于另一大类引用类型，Java将其细分为四种：类、接口、数组类和泛型参数。由于泛型参数会在编译过程中被擦除，因此Java虚拟机实际上只有前三种。在类、接口和数组类，数组类是由Java虚拟机直接生成的，其他两种则有对应的字节流。字节流，最常见的形式要属由Java编译器生成的class文件。除此之外，我们也可以在程序内部直接生成，或者从网络中获取（例如网页中内嵌的小程序Javaapplet）字节流。这些不同形式的字节流，都会被加载到Java虚拟机中，成为类或接口。 　　加载： 　　加载，是指查找字节流，并且据此创建类的过程。前面提到，对于数组类来说，它并没有对应的字节流，而是由Java虚拟机直接生成的。对于其他的类来说，Java虚拟机则需要借助类加载器来完成查找字节流的过程。除了启动类加载器之外(启动类加载器是由C++实现的，没有对应的Java对象，因此在Java中只能用null来指代)，其他的类加载器都是j

  • JVM调优总结(这个总结得比较全面)

    堆大小设置 JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server2003系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx3550m-Xms3550m-Xmn2g -Xss128k -Xmx3550m：设置JVM最大可用内存为3550M。 -Xms3550m：设置JVM促使内存为3550m。此值可以设置与-Xmx相同，以避免每次垃圾回收完成后JVM重新分配内存。 -Xmn2g：设置年轻代大小为2G。整个JVM内存大小=年轻代大小+年老代大小+持久代大小。持久代一般固定大小为64m，所以增大年轻代后，将会减小年老代大小。此值对系统性能影响较大，Sun官方推荐配置为整个堆的3/8。 -Xss128k：设置每个线程的堆栈大小。JDK5.0以后每个线程堆栈大小为1M，以前每个线程堆栈大小为256K。更具应用的线程所需内存大小进行调整。在

  • 库存更新

    依照一个存着新进货物的二维数组，更新存着现有库存(在 arr1 中)的二维数组.如果货物已存在则更新数量.如果没有对应货物则把其加入到数组中，更新最新的数量.返回当前的库存数组，且按货物名称的字母顺序排列. functionupdateInventory(arr1,arr2){  //Allinventorymustbeaccountedfororyou'refired!  for(vari=0;i<arr1.length;i++){    for(varj=0;j<arr2.length;j++){      if(arr1[i][1]==arr2[j][1]){        arr1[i][0]+=arr2[j][0];        arr2

  • 算法第一章作业

      1：代码规范。在对比了多家公司的不同规范方法后，我决定采用华为使用的规范，链接：https://blog.csdn.net/sdfgh2046/article/details/12424287 相较于谷歌、字节跳动公司的规范更加简洁明了。   2：数学之美读后感：我在中学时代对数学抱有很深的偏见，对于一个饱受数学折磨的学生，我执拗地认为数学是一门枯燥乏味的学科。在阅读了数学之美这本书后，我意识到了数学对于当今社会的重要性。对于同一个问题，可以有千万种不同的求解思路，每一种思路又有其独特的优劣性，我们作为程序的设计者，应当以全面的眼光审视问题，找到最佳的解决方案。书中对矩阵和向量的用法令我拍手称奇。正是因为数学独特的魅力，我们才能由此解决生活中的形形色色的问题。与此同时，我们也应当意识到程序是为人服务的，不论是程序代码还是程序前端，我们都应当以人为本，简洁性和易用性也占据相当重要的位置。   3：本学期目标：设计一个资源整合类的网站（暂定）

  • Mysql1：数据库表操作，增删改查举例

    数据库表的相关操作 添加数据库表 语法： 　　    实例： 　　     查看数据库表 语法： 　　showtables; 实例： 　　   查看数据库表结构 1）使用DESCRIBE/DESC 　　    语法： 　　  实例： 　　    　　    2）SHOWCREATETABLE   语法： 　　  实例： 　　    　　使用此方法查看数据库表结构时，不仅可以查看表创建时候的详细语句，而且还可以查看存储引擎和字符编码。 　　  修改表名 语法： 　　  　　to为可选参数，使用与否均不影响  实例： 　　将user_info表改为user_data 　　     修改字段的数据类型 语法： 　　   实例： 　　将id的数据类型由varcahr(125)改为varchar(11) 　　   修改字段名   语法： 　　 &nb

  • Android APP切换到后台接收不到推送消息

    1.   Android端进程被杀死后，目前自带的保护后台接收消息活跃机制。暂时没有什么好的机制保持任何情况下都活跃 android原生系统用home键杀进程可以起来，如果是强行停止就只能用户自己手动开启应用 如果是miui等第三方应用，杀了进程默认无法自启动如果是root过的原生系统，杀了进程也是没有办法起来的，这个时候推送是收不到的   如果是原生系统，没有root，只要不是强行停止，其他系统自带的停止方式都可以自启动，一般10s内恢复 目前已知以下第三方系统会影响到应用：小米【MIUI】        自启动管理：需要把应用加到【自启动管理】列表，否则杀进程或重新开机后进程无法开启        通知栏设置：应用默认都是显示通知栏通知，如果关闭，则收到通知也不会提示    华为【Emotion】    &

相关推荐

推荐阅读